HTML/CSS 将 div 设置为兄弟的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2715360/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS set div to height of sibling
提问by
I have 2 div's contained in a third. One of the contained div's is floated left, the other floated right. I would like the 2 sibling div's to always be at the same height, but am having a problem with this. So far I am only viewing the page in Firefox, and figured I'd worry about any cross-browser issues after I get it working in at least one browser.
我有 2 个 div 包含在第三个中。一个包含的 div 向左浮动，另一个向右浮动。我希望 2 个兄弟 div 始终处于相同的高度，但对此有问题。到目前为止，我只在 Firefox 中查看该页面，并且认为在至少在一个浏览器中运行后我会担心任何跨浏览器问题。
Here is the markup:
这是标记：
<div id="main-container" class="border clearfix">
<div id="left-div" class="border">
...
</div>
<div id="right-div" class="border">
...
</div>
</div>
Here is the CSS:
这是CSS：
#main-container { position: relative; min-height: 500px; }
#left-div { position: relative; float: left; width: 700px; min-height: inherit; }
#right-div { position: relative; float: right; width: 248px; min-height: inherit; height: inherit; }
.clearfix:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; _height: 1%; clear: both; }
.clearfix { display: block; clear: both; }
.border { border: solid 1px #000; }
If the content in the #left-divis longer than 500px, the #right-divdoes not expand to match. In an example I tried, Firefox said the computed style height of the #main-containerwas 804px, the computed style height of the #left-divwas 800px, and the computed style height of the #right-divwas 586.2px, as it had expanded to fit it's own content.
如果 中的内容#left-div长于500px，#right-div则 不会扩展以匹配。在我尝试了一个例子，说的Firefox的计算式的高度#main-container是804px，的计算式的高度#left-div是800px和的计算的风格高度#right-div为586.2px，因为它已经扩展到适合它自己的内容。
I understand I might be going about this the wrong way, and if this is a duplicate questions then I apologize, but I wasn't quite sure what to search under.
我知道我可能会以错误的方式解决这个问题，如果这是一个重复的问题，那么我很抱歉，但我不太确定要搜索什么。
采纳答案by Pekka
I can rack my brain all I want, but I think this can really be solved only using table behaviour, i.e. using <table>s (if you need to be IE6 and IE7 compatible) or display: table / table-row / table-cell(which is effectively the same thing but won't embarrass you in front of your peers because tables are evil. ;).
我可以绞尽脑汁，但我认为这真的只能通过使用表行为来解决，即使用<table>s（如果您需要兼容 IE6 和 IE7）或display: table / table-row / table-cell（这实际上是同一件事，但不会让您难堪）在你的同龄人面前，因为桌子是邪恶的。;)。
I'd go for a table.
我会去找一张桌子。
Feel free to prove me wrong and post a sane CSS solution, I'd be delighted!
随意证明我错了并发布了一个合理的 CSS 解决方案，我会很高兴！
回答by jgkingston
If you know which of the inner div's you want to set the height of the page layout you can do something like this: http://codepen.io/anon/pen/vOEepW
如果您知道要设置页面布局的高度的内部 div，您可以执行以下操作：http: //codepen.io/anon/pen/vOEepW
<div class="container">
<div class="secondary-content">
<div class="content-inner">
</div>
</div>
<div class="main-content">
</div>
</div>
Setting the containing div to position: relative and then setting one of the inner divs to position absolute allows the other, "un-styled" div to effectively control the height of both.
将包含的 div 设置为 position:relative 然后将一个内部 div 设置为 position absolute 允许另一个“未样式化”的 div 有效地控制两者的高度。
.container {
position: relative;
}
.main-content {
width: 80%;
margin-left: 20%;
height: 300px;
background-color: red;
}
.secondary-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 20%;
overflow-y: scroll;
}
It is also possible to do this, and perhaps easier using flexbox, but that has some browser support issues.
也可以这样做，并且使用 flexbox 可能更容易，但这有一些浏览器支持问题。
回答by Arts Fantasy
First thing you should ask yourself is - Why do you need them to be at the same height? Is it because:
你应该问自己的第一件事是 - 为什么你需要它们处于相同的高度？是不是因为：
- You want the background to be the same size?
- The middle border to be the same height?
- Or is there some content on the bottom that needs to be displayed inline with bottom of the other div?
- 您希望背景大小相同吗？
- 中间边框要一样高吗？
- 或者底部是否有一些内容需要与另一个div的底部内联显示？
1)If you want the background to be the same size, then i advise you to CSS style the parent div, and at worst - edit the background image so it fits. With CSS2 you can position the background easy
1）如果您希望背景大小相同，那么我建议您为父 div 设置 CSS 样式，最坏的情况是 - 编辑背景图像以使其适合。使用 CSS2，您可以轻松定位背景
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
2)Whenever i stumble upon your problem, i need the center border to be the same height. The solution is easy- apply the border style to the DIV that will be longest.
2）每当我偶然发现您的问题时，我都需要中心边框的高度相同。解决方案很简单 - 将边框样式应用于最长的 DIV。
3)Merge both of the content to a third sibling DIV, if you cant, then you will need JavaScript.
OR as Pekka said - use display: tableif you don't care about IE.
3) 将两个内容合并到第三个兄弟 DIV，如果不能，则需要 JavaScript。或者如 Pekka 所说 -display: table如果您不关心 IE，请使用。
回答by Dan Beaulieu
I ran into this issue several times this week and this topic was the closest I came to finding a concrete answer. This is an expansion on @Pekka's response for those who need a bit more to go on, I certainly did.
本周我多次遇到这个问题，这个话题是我最接近找到具体答案的话题。这是对@Pekka 对那些需要更多内容的人的回应的扩展，我当然做到了。
example html:
示例 html：
<div class="view-table">
<div class="view-row">
<div class="view-type">Type</div>
<div class="view-name">
Lorem ipsum dolor sit amet, at assum gubergren his,
ex iudicabit dissentiunt intellegebat has. Ne odio detraxit
instructior vim. Fugit velit consetetur an eos.
Ea suas veri mnesarchum mel.
</div>
</div>
</div>
example css:
示例CSS：
.view-table
{
display:table;
width:100%;
}
.view-row
{
display:table-row;
}
.view-row > div
{
display: table-cell;
}
.view-name
{
text-align:right;
background-color: lightblue;
}
.view-type
{
background-color: pink;
}
回答by David
This will allow the right div's height to always be that of the left as left grows dynamically based on content, but the right will never grow larger than min-height if the left has less content, that may be acceptable for you:
这将允许右侧 div 的高度始终是左侧的高度，因为左侧会根据内容动态增长，但是如果左侧的内容较少，右侧的高度永远不会大于 min-height，这对您来说可能是可以接受的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Matching Size Divs</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style>
#main-container { position:relative; min-height:500px; }
#left-div { width:700px; min-height:500px; }
#right-div { position:absolute; margin-left:700px; width:248px; top:0px; bottom:0px; }
</style>
</head>
<body>
<div id="main-container" class="border clearfix">
<div id="left-div" class="border">
...
</div>
<div id="right-div" class="border">
...
</div>
</div>
</body>
</html>
回答by tom
I think you have these options:
我认为你有这些选择：
- faux columns - using a repeating background image for the container div to create the appearance of equal height
- using a table
- using javascript to adjust the div height
- using a javascript to add css support to non-compliant browsers
- 假列 - 使用容器 div 的重复背景图像来创建等高的外观
- 使用桌子
- 使用javascript调整div高度
- 使用 javascript 向不兼容的浏览器添加 css 支持
回答by Braxo
In order to do this with HTML and CSS using divs, you will need to use JavaScript to check their heights, then change one to match.
为了使用 div 对 HTML 和 CSS 执行此操作，您需要使用 JavaScript 来检查它们的高度，然后更改一个以匹配。
If you don't want to use JavaScript, and your site has a particular design, in your third div, you can give it a repeat-y background image that will expand as one of the two divs does. So for example, say your two divs have a blue background, and your third containing div has a grey background. Remove the blue background and create an image that is repeatable using the blue and grey, and place that image for the third div. That way, as it expands, it will appear the two divs are as well.
如果您不想使用 JavaScript，并且您的网站有特定的设计，则在您的第三个 div 中，您可以给它一个重复的背景图片，该图片将像两个 div 之一一样展开。例如，假设您的两个 div 具有蓝色背景，而您的第三个包含 div 具有灰色背景。移除蓝色背景并使用蓝色和灰色创建一个可重复的图像，并将该图像放置在第三个 div 中。这样，当它扩展时，两个 div 也会出现。
回答by Sameer Goyal
I think this can be implemented by specifying both the div s (i.e. left-div & right-div) height to be 100%. This way they'll take up the height of container div & if no height is specified for the container div by html/css, then the container div also expands to accommodate its child elements. I know its quite late, but it might just save you the script.
我认为这可以通过将 div （即左 div 和右 div）高度指定为 100% 来实现。这样，它们将占用容器 div 的高度，如果 html/css 没有为容器 div 指定高度，则容器 div 也会扩展以容纳其子元素。我知道它很晚了，但它可能只是为您节省了脚本。
回答by trgraglia
They will stack if there is not enough room. Make sure the div containing both is wide enough to have them both... if you remove their widths for testing, I bet it will work.
如果没有足够的空间，它们将堆叠。确保包含两者的 div 足够宽以让它们同时存在……如果您删除它们的宽度进行测试，我敢打赌它会起作用。
回答by hawaii
It's a bit out of the scope, but I have a nasty Javascript solution.
这有点超出范围，但我有一个讨厌的 Javascript 解决方案。
HTML:
HTML：
<div id="element-without-height" copy-size="#element-with-height"></div>
<div id="element-with-height"></div>
Javascript (using jQuery):
Javascript（使用jQuery）：
$(document).ready(function() {
$(window).on('resize', function() {
$('[copy-size]').each(function() {
var copyEl = $($(this).attr('copy-size'));
var targetEl = $(this);
targetEl.width(copyEl.width() + 'px');
targetEl.height(copyEl.height() + 'px');
});
});
});
