如何通過瀏覽器

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是解決此問題的一種方法。