是否可以讓div的高度達到可用區域的100％？

我的設計在右側有一個左側欄和一個主要內容。在網站上的大多數頁面上，左側邊欄比內容更好，但對於幾頁，內容非常高，側邊欄懸空而沒有底部。是否可以讓div的高度達到可用區域的100％？

我已經創造了什麼我在這裏談論的小便差例如：

http://www.pmind.com/staging/pisspoor.html

記得多年前的答案是隻分配一個背景圖像中會捏造事實，即我例如，只需製作一個圖像，該圖像的左側有一個綠色條，並將該背景設置爲主紅色div。而且我知道這是一個普遍的想法，因爲網站的瀏覽器窗口占100％，所以您可以使HTML和BODY爲100％，但在這種情況下，該區域受到頁眉和頁腳的限制，因此瀏覽器尺寸不是一個因素，我只想要綠色的div是它的父紅色div的高度。這仍然是CSS2.1及更低版本的夢想嗎？

來源

2010-12-22 Michael Davis

可能與http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying -parents-height – simshaun 2010-12-22 22:42:59

您可以使用JavaScript來完成這項工作，或者你可以在CSS中的內容設定的最小高度：

#content { 
min-height:500px; 
}

來源

2010-12-22 22:37:23 DADU

如果您查看我提供的示例的源代碼，側邊欄是一個浮動div，因此分配最小高度：100％聲明不會執行任何操作，並將最小高度聲明與一個靜態值會破壞試圖使其動態增長的目的。 – 2010-12-27 18:35:47

這裏是DIV定位的一個很好的例子。這是一個工作示例http://jsbin.com/izosi3

<div id="header" style="position:absolute; top:0px; left:0px; height:50px; right:0px;"> 
</div> 
<div id="leftnav" style="position:absolute; top:50px; left:0px; bottom:50px; width:150px;"> 
</div> 
<div id="content" style="position:absolute; top:50px; left:150px; bottom:50px; right:0px;"> 
</div> 
<div id="footer" style="position:absolute; height:50px; left:0px; bottom:0px; right:0px;"> 
</div>

來源

2010-12-23 04:52:17

這是一個非常簡單和優雅的方式做到這一點，我從來沒有意識到你可以設置0和頂部和底部的CSS聲明和div會像這樣拉伸。不幸的是，這個解決方案只有在「content」div的內容高於「leftnav」div時纔有效。對於大多數網站的問題，「leftnav」div是較高的div。 – 2010-12-27 18:44:01

是否可以讓div的高度達到可用區域的100％？

回答

相關問題