如何通过浏览器

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＃容器的高度必须> 500px。

而三个divs的高度都是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里面最后也会有500px。

Answer 3

当您将div1，div2，div3设置为float属性时，以最高者为准将确定容器div的高度。

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