HTML5/CSS - div拉伸超過身體100％

我想擺出一個web應用程序，並遇到伸展身體和html之外的div問題。HTML5/CSS - div拉伸超過身體100％

粉色內的div時設定爲100％的高度其容器的外部延伸。爲什麼是這個，我該如何解決它？

2012-01-03 dex3703

你試圖斷言55px + 65px + 90% + 50px = 100%，但你不能這樣做。這將是適用於某些高度（在您的整個內容的高度爲1700px，見下文），但不是全部的高度：

55px + 65px + 90% + 50px = 100% 
55px + 65px + 50px  = 10% 
170px     = 10% 
1700px     = 100%

編輯：你可以達到你想要通過使用相對什麼/絕對位置。請參閱以下jsFiddle：http://jsfiddle.net/Pftpu/12/

請注意，由於整個頁面周圍的邊框，這仍然會大於100％。你可以將它們包裝在另一個div中，但是我想通過只更改與您遇到的主要問題相關的CSS屬性來顯示此示例。

2012-01-03 21:20:34

你會提出什麼樣的佈局，使頁眉和頁腳在正確的位置固定高度，#mainsection填充剩餘空間？ – dex3703 2012-01-03 21:38:32

請參閱我上面的編輯，瞭解絕對和相對CSS位置（以及附件[jsFiddle]（http://jsfiddle.net/Pftpu/12/）示例）。 – 2012-01-03 21:46:28

是不是絕對會與其他內容重疊？ – 2012-01-03 21:48:43

您正在混合像素和百分比，這是行不通的。

#mainsection擁有90％，爲#header（65px），#topnav（55px）和#drawer（50px）留下10％。在700px的窗口高度處，保留了70px - 這比65 + 55 + 50 = 170px小很多。

你會需要的正是10x170 = 1700px的高度爲你的佈局工作 - 或者換句話說：從未混合像素和百分比...

2012-01-03 21:18:40 ptriek

你會建議什麼樣的佈局，以便頁眉和頁腳在正確的位置固定高度，而#mainsection填充剩餘空間？ – dex3703 2012-01-03 21:33:45

回答