用相對定位的CSS設置DIV的高度

我有一些想要佈局幾個DIV的HTML + CSS代碼。佈局如下所示：所有DIV都保留在大小固定的父DIV中。然後，每個孩子DIV應該保持在自己的路線上，並使用最小高度來繪製其內容。最後一個DIV應該消耗所有剩餘的高度，以便父DIV完全填充。用相對定位的CSS設置DIV的高度

此代碼顯示了使用CSS float和clear性能我的方法：

<html> 
    <head> 
    <style> 
     <!-- 
     .container { 
     width: 500px; 
     height: 500px; 
     border: 3px solid black; 
     } 

     .top { 
     background-color: yellow; 
     float: left; 
     clear: left; 
     width: 100%; 
     } 

     .bottom { 
     background-color: blue; 
     height: 100%; 
     float: left; 
     clear: left; 
     width: 100%; 
     } 
    --> 
    </style> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="top">top1</div> 
     <div class="top">top2</div> 
     <div class="top">top3</div> 
     <div class="top">top4</div> 
     <div class="bottom">bottom</div> 
    </div> 
    </body> 
</html>

然而，最後DIV從其父溢出。我想這是因爲width: 100%。

有什麼辦法可以解決這個問題嗎？我想避免設置父項的overflow屬性，並且我必須避免使用絕對定位。如果以某種方式我可以欺騙最後一個DIV使用父母的高度減去其他DIV的高度之和。

謝謝。

來源

2009-11-03 Gabriel

這是浮動定位，不是相對定位。 – elzapp 2009-11-03 10:00:34

地址：

div.container { overflow: hidden; }

它不溢出，因爲它是100％的寬度。這是溢出，因爲它是一個浮動，因此從正常的佈局中刪除。更改溢出屬性將改變瀏覽器如何滿足包含的浮動內容。

哦，如果你還沒有，請確保你使用的是DOCTYPE。這對於IE尤其重要。

來源

2009-11-03 09:57:45 cletus

謝謝！是的，但這會隱藏我想避免的底部DIV的一部分。原則上，我可以在藍色DIV底部對齊一些東西，他們也應該顯示。我想要的只是垂直拉伸藍色的DIV。 – Gabriel 2009-11-03 10:14:37

用相對定位的CSS設置DIV的高度

回答

相關問題