如何將 Div 設定為 100% 正文高度（不包括固定高度的頁首和頁尾）？

將Div 設定為100% 正文高度，不包括固定高度的頁眉和頁腳

CSS 可以對網頁佈局優雅的控制。常見的要求是以 100% 的正文高度顯示內容，同時排除固定高度的頁首和頁尾所佔用的空間。要實現這種效果需要細緻的 CSS 實現，以確保跨瀏覽器相容性。

一個萬無一失的解決方案是將 html 和 body 設為 min-height: 100%;，確保頁面盡可能擴展。然後，應該創建一個具有絕對定位和填充的包裝 div，以適應頁首和頁尾的高度。在此包裝器中，​​#content div 可以設定為 min-height: 100%;，使其填滿剩餘空間。

為了確保頁首和頁腳保持固定，margin-top: -50px;和邊距底部：-50px；被應用，有效地抵消了添加到包裝紙上的填充。這些負邊距值將頁首和頁腳推到包裝器 div 之外，給人一種它們懸浮在內容上方和下方的錯覺。

此技術已測試並證明可在現代瀏覽器甚至 Internet Explorer 8 上使用使用 Modernizr（或如果 Modernizr 不可用，則只需用 div 取代頁首和頁尾元素）。帶有實例的程式碼片段可用於進一步說明。

以上是如何將 Div 設定為 100% 正文高度（不包括固定高度的頁首和頁尾）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！