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

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

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

html, body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

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

#wrapper {
  padding: 50px 0; /* Adjust to match header and footer heights */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

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

#content {
  min-height: 100%;
}

為了考慮頁首和頁尾的高度，我們使用負邊距來抵銷它們。

header {
  margin-top: -50px; /* Adjust to match header height */
  height: 50px;
}

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

此方法可確保內容 div 佔據頁首和頁尾的固定高度後剩餘的空間，從而形成適應不同螢幕尺寸和裝置方向的無縫動態佈局。