Html 当容器具有高度时，将嵌套 div 拉伸到容器 div 的高度：自动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2391664/
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
Stretch nested div to height of container div when container has height:auto?
提问by Rahul
I have a container div and two nested divs within. I do not have control over the content of either of these nested divs.
我有一个容器 div 和两个嵌套的 div。我无法控制这些嵌套 div 中的任何一个的内容。
What I essentially need is to make the two nested divs always have the same height. I figured this can be achieved by giving the container div height:auto so that it would stretch its own height to the tallest of the two nested divs (each of which stretches to fit its own content), and then the other nested div would stretch to 100% of the container's height.
我本质上需要的是使两个嵌套的 div 始终具有相同的高度。我认为这可以通过给容器 div height:auto 来实现，这样它就可以将自己的高度拉伸到两个嵌套 div 中最高的一个（每个都拉伸以适应自己的内容），然后另一个嵌套的 div 将拉伸到容器高度的 100%。
Here's what I tried:
这是我尝试过的：
Style:
风格：
#container{
background-color:#FF0;
overflow:auto;
}
#left{
float:left;
height:100%;
width:20%;
background-color:#F00;
}
#right{
height:100%;
width:60%;
background-color:#0F3;
}
HTML:
HTML：
<div id="container">
<div id="left">
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div id="right">
<p>Content</p>
<p>Content</p>
</div>
</div>
But this does not work. The container stretches to fit the longest div ("left" in this case) but the shorter nested div ("right") does not stretch itself.
但这不起作用。容器会拉伸以适应最长的 div（在本例中为“左”），但较短的嵌套 div（“右”）不会自行拉伸。
Note, however, that this DOES work if I give the container a specific height:
但是请注意，如果我给容器一个特定的高度，这确实有效：
#container{
background-color:#FF0;
overflow:auto;
height:300px;
}
Is there any way I can get this to work without resorting to tables?
有什么方法可以让我在不求助于表格的情况下工作吗？
回答by Nasser Hadjloo
The Important Note is that Percent Value for Height Deprecated a while ago. So you have to use another pattern.
重要的一点是，高度的百分比值不久前已弃用。所以你必须使用另一种模式。
Most of the time (specially in your case) the panels height are sets automatically. So it is better to increase the height with a little javascript
大多数情况下（特别是在您的情况下）面板高度是自动设置的。所以最好用一点javascript增加高度
<script>
function IncreaseHeight()
{
var first = Document.getElementById("Right").style.height;
var second = Document.getElementById("Left").style.height;
if(first < second)
Document.getElementById("Right").style.height = Document.getElementById("Left").style.height;
else
Document.getElementById("Left").style.height = Document.getElementById("Right").style.height;
}
</script>
note that change the place of Right and Left base onyour case.
请注意，根据您的情况更改 Right 和 Left 的位置。
回答by Jimmy Cuadra
The two most common ways to do this are Faux Columnsusing images or setting the heights to equal values with JavaScript. I did a screencast to demonstrate the second technique, Equalizing Column Heights with jQuery. The technique could be easily adapted for other libraries or for plain JavaScript.
两种最常见的方法是使用图像的Faux Columns或使用 JavaScript 将高度设置为相等的值。我做了一个截屏视频来演示第二种技术，使用 jQuery 均衡列高。该技术可以很容易地适用于其他库或纯 JavaScript。
