如何通过浏览器使两个div在同一行具有相同的高度答案

【问题标题】：How to make the two div at the same line with the same height by browser如何通过浏览器使两个div在同一行具有相同的高度
【发布时间】：2011-03-17 16:51:00
【问题描述】：

例如，这是我的页面布局，

++++++++++++++++++++++++++
+       +  div2 +       +
+ div1   +     +       +
+       +       + div3  +
+       +++++++++       +
+       +       +       +
+       +       +++++++++
+       +               +
++++++++++++++++++++++++++

如图，div1和div2和div3在同一行，

<div id="container" style="width:100%;min-height:500px;">
    <div id="div1" style="float:left;width:19%;height:100%"></div>
    <div id="div2" style="float:left;width:1%;height:100%">
       <img src="toggle.gif" /></div>
    <div id="div3" style="float:left;width:80%;height:100%"></div>
</div>

但它们的高度不同，因为它们的内容不一样。

即使我设置了它们父元素的最小高度，并将高度设置为 100%。

我认为 div#container 的高度必须 > 500px。

而且三个div的高度都是100%，所以至少要占500px。

但看来我错了。我想知道这是怎么回事？

BWT，在div2里面只有一个用来切换div1的图标（使用jquery），但是当div1隐藏时，div3也只占浏览器窗口的80%，如何让div2和div3占据整个窗口？

我知道我可以使用jquery来设置它们的大小，但是我想知道这是否可以通过浏览器实现？

【问题讨论】：

标签： html css layout dimensions

【解决方案1】：

当您以 % 指定浮点数时，它不会根据其父级的高度来计算其高度。所以你的 100% 并不是指父母的身高。您可能应该采用的方法是使用position:absolute; top:0; bottom:0; 而不是float:left; height 100%; 唯一的问题是父母（在您的情况下为container）不会根据任何孩子的身高增长。然后，您应该指定container 的高度或使其任何子列不是position:abosute。试试这个：

<div id="container" style="width:100%;height:500px;position:relative;">
<div id="div1" style="background:blue; position:absolute; top:0; bottom:0; width: 19%;"></div>
<div id="div2" style="background:red; position:absolute; top:0; bottom:0; width: 1%; left: 19%;">
   <img src="toggle.gif" /></div>
<div id="div3" style="background:green; position:absolute; top:0; bottom:0; width:80%; left:20%;"></div>

jsfiddle：http://jsfiddle.net/jVRpK/

【讨论】：

【解决方案2】：

尝试将min-height:500px; 添加到 div1、div2 等。在父容器上设置的 Min-height 属性并不意味着里面的 div 也将有最后 500 px。

【讨论】：

【解决方案3】：

当你设置 div1, div2, div3 为 float 属性时，以最高者决定容器 div 的高度。

使用Faux Colums 是解决此问题的一种方法。

【讨论】：

并非如此，只有当容器具有overflow: hidden 时，您的第一个陈述才是正确的。否则在这种情况下容器的高度将为零（除非设置了min-height 或height）。