首頁 > web前端 > css教學 > 如何將 Div 設定為 100% 正文高度(不包括固定高度的頁首和頁尾)?

如何將 Div 設定為 100% 正文高度(不包括固定高度的頁首和頁尾)?

Patricia Arquette
發布: 2024-11-02 14:05:03
原創
652 人瀏覽過

How to Set a Div to 100% Body Height, Excluding Fixed-Height Header and Footer?

將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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板