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”）不会伸展自己。

但是请注意，如果我给容器一个特定的高度，这个可以工作：

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

请注意，在你的情况下改变右和左基地。

Answer 2

执行此操作的两种最常见方法是Faux Columns使用图像或使用JavaScript将高度设置为相等的值。我做了一个截屏视频来演示第二种技术，Equalizing Column Heights with jQuery。该技术可以很容易地适用于其他库或纯JavaScript。

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

2 个答案: