小编Rah*_*hul的帖子

我有一个容器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;
}

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