CSS：最小高度100％（屏幕上還有固定元素）？

我一直試圖使用最小高度：100％來讓我的內容區域伸展以填充屏幕的剩餘百分比，但我只是簡單的難住。任何幫助表示讚賞。CSS：最小高度100％（屏幕上還有固定元素）？

我有3個固定的高度divs在屏幕的頂部和1個固定高度頁腳。然後我有另一個div，其中非固定高度部分位於，這是「容器」div。在這裏我有內容和邊欄div，我想擴展到100％的屏幕最低限度，並擴大到適合的內容。

http://jsfiddle.net/P3Ckk/110/

任何和所有幫助表示讚賞。它讓我卡住了。

來源

2012-06-03 jstacks

您有#conatinerWide設置爲灰色背景，我假設您希望它伸展以填充其餘的部分。

事情是html和body將只擴大到足以適應您的內容。所以將它們設置爲100％會告訴它填充文檔窗口;允許您的#containerWide現在是100％可用空間。

添加html, body { height: 100%; }要達到你想要什麼

http://jsfiddle.net/rtgibbons/P3Ckk/111/

更新徵求意見;

對於您希望min-height:100%的每個元素爲窗口的大小，您需要將height:100%設置爲父元素。所以#containerWide需要height:100%和#container需要min-height:100%; height:100%;。現在有趣的部分。如果您對#exsi和#cont執行相同的模式，將會是#container的高度，並且不調整#foot所需的空間。

這裏就是我會繼續

http://jsfiddle.net/rtgibbons/P3Ckk/113/

基本上，我對所有的父母元素設置min-height:100%; height:100%。我已將#foot移出#container，因此它將與列最大化。然後我申請了一些負高度的底部總高度爲#foot，所以它會被吸進裏面#containerWide

兩個注意事項。

填充用100％是造成#exsi和#cont擴大過去#containerWide所以去除它們，並根據需要或又一包裝將它們應用到所述內元件。
頁腳將出現在摺疊下方。這是你正在定位的B/C #containerWide;我會把這個作爲一個練習，讓你弄清楚。

來源

2012-06-03 21:19:30

這就是我想要的，但不完全是。抱歉不清楚。我只是設置這些顏色，以便更容易看到所有不同的div。我實際上希望#container用#content和#exsi div（黃色和橙色）填充。所以，淺灰色應該像您的示例中那樣填充，但黃色和橙色也會填充剩餘空間，並將#foot（綠色）留在底部。此外，我希望這只是一個最低限度，以便當#content或#exsi divs的內容超過100％時......他們擴大（希望總是擴大彼此）。 – jstacks

這變得有點棘手。更新我的答案與答覆 –

謝謝。這是完美的。現在，我理解......爲什麼是高度：100％不會進入導航，頂級和標題div？是因爲那些阻礙父「containerWide」div的方式？並且不要填寫整個100％？如果是這樣，那麼我認爲這是一個高度爲100％的屬性......它不會與div相重疊，它只會是剩餘空間的100％？我只是想了解它背後的邏輯，所以我知道未來會發生什麼。無論如何，再次感謝你！ – jstacks

CSS：最小高度100％（屏幕上還有固定元素）？

回答

相關問題