Question

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

++++++++++++++++++++++++++
+       +  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的高度必须> gt; 500px的。

三个div的高度都是100％，所以它们应该至少需要500px。

但似乎我错了。我想知道发生了什么事？

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

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

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

Answer 2

尝试将min-height:500px;添加到div1，div2等。父容器上设置的最小高度属性并不意味着内部的div也将具有最后500 px。

Answer 3

当你设置div1，div2，div3和float属性时，最高者将确定容器div的高度。

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

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

3 个答案: