如何讓內容 Div 填滿正文高度的 100%（不包括固定頁首和頁尾）？

如何設定內容Div 佔據正文高度的100%（不包括固定高度的頁眉和頁腳）

CSS 允許您定義精確的以及網頁的多功能版面。一個常見的挑戰是將內容區域設定為佔據頁面的整個高度，同時排除頁首和頁尾等固定高度元素所佔用的空間。本指南提供了使用純 CSS 的全面解決方案，該解決方案相容於所有現代瀏覽器。

HTML 結構包含頁首、內容 div 和頁尾。在 CSS 中，我們首先確保 html 和 body 元素的最小高度為 100%，並且沒有邊距或填滿。

<code class="css">html, body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}</code>

為了定位內容區域，我們引入了一個跨越 #wrapper div使用絕對定位的整個視口。

<code class="css">#wrapper {
  padding: 50px 0; /* Adjust to match header and footer heights */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}</code>

在#wrapper 內部，我們定義最小高度為100% 的內容div (#content)。這可確保它填滿整個可用空間。

<code class="css">#content {
  min-height: 100%;
}</code>

為了考慮頁眉和頁腳高度，我們使用負邊距來抵消它們。

<code class="css">header {
  margin-top: -50px; /* Adjust to match header height */
  height: 50px;
}

footer {
  margin-bottom: -50px; /* Adjust to match footer height */
  height: 50px;
}</code>

這個方法可確保content div 在頁眉和頁腳固定高度後佔據了剩餘的空間，從而形成無縫且動態的佈局，適應不同的螢幕尺寸和裝置方向。

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