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

我有一个容器div和两个嵌套div。我无法控制这两个嵌套div的内容

我本质上需要的是使两个嵌套的div始终具有相同的高度。我认为这可以通过指定container div height: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;
}

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

HTML:

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

#left{
  float:left;
  height:100%;
  width:20%;
  background-color:#F00;
}

#right{
  height:100%;
  width:60%;
  background-color:#0F3;
}

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

---

有没有办法不用借助表格就可以实现这一点？

重要的一点是，高度的百分比值不久前就被弃用了。所以你必须使用另一种模式

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

函数递增高度（）
{
var first=Document.getElementById（“Right”）.style.height；
var second=Document.getElementById（“左”）.style.height；
如果（第一次<第二次）
Document.getElementById（“右”）.style.height=Document.getElementById（“左”）.style.height；
其他的
Document.getElementById（“左”）.style.height=Document.getElementById（“右”）.style.height；
}

---

请注意，在您的案例中更改左右基的位置。

最常用的两种方法是使用图像或使用JavaScript将高度设置为相等的值。我做了一个屏幕放映来演示第二种技术。该技术可以很容易地应用于其他库或普通JavaScript。

如果他需要两个列相等（取决于最大列的高度），那么将其转换为一个函数来查找两个div中最高的一个，然后将该高度指定给较小的。@ricebowl-我已经更新了脚本以在您的senario中工作。检查它。Hajloo，+1表示修订版，函数=）我会使用它，但我会传递两个变量，即递增高度（id1，id2），并将Document.getElementById（“Right”）更改为Document.getElementById（id1），将“left”更改为id2，这样可以传递多个列。然后使用需要比较的div调用increaseHeight。您可能需要附加一些字符串标记，因为我不确定您是否可以使用Document.getElementById传递这样的变量