当容器具有高度:auto时,将嵌套div拉伸到容器div的高度？

Question

我有一个容器div和两个嵌套的div.我无法控制这些嵌套div中的任何一个的内容.

我基本上需要的是使两个嵌套的div总是具有相同的高度.我认为这可以通过给容器div高度:auto来实现,这样它就可以将自己的高度伸展到两个嵌套div中的最高层(每个div都伸展以适合自己的内容),然后另一个嵌套的div会伸展达到容器高度的100%.

这是我试过的:

样式:

#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:

<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>

但这不起作用.容器伸展以适合最长的div(在这种情况下为"left"),但较短的嵌套div("right")不会伸展自身.

但请注意,如果我给容器一个特定的高度,这个DOES是有效的:

#container{
  background-color:#FF0;
  overflow:auto;
  height:300px;
}

有没有什么方法可以让我在不诉诸表格的情况下工作？

Answer 1

重要提示是高度百分比值不久前已弃用。所以你必须使用另一种模式。

大多数时候（特别是在您的情况下）面板高度是自动设置的。所以最好用一点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>

请注意，根据您的情况更改右和左的位置。