如何讓動態內容Div填滿頁首和頁尾後剩餘的正文高度？

確保動態內容Div 填充頁眉和頁腳後的剩餘正文高度

實現固定高度頁眉和頁腳後跨越剩餘正文高度的內容div一個常見的CSS 挑戰。以下綜合解決方案解決了現代瀏覽器和 Internet Explorer 8 中的此問題。

在此範例中，將內容包裝在「#wrapper」div 中，絕對定位並跨越整個視窗。將“min-height”屬性設為 100%，以確保它至少佔據該高度，並添加填充以考慮頁首和頁尾。

將內容嵌套在「#content」div 中，並使用「min-height」為100%以佔據剩餘高度。給頁首和頁腳固定高度，並負向調整它們的邊距以補償「#wrapper」div 中的填滿。

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

#wrapper {
  padding: 50px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#content {
  min-height: 100%;
  background-color: green;
}

header {
  margin-top: -50px;
  height: 50px;
  background-color: red;
}

footer {
  margin-bottom: -50px;
  height: 50px;
  background-color: red;
}</code>

此解決方案根據視口大小動態調整內容 div 的高度，確保它無縫地填充了剩餘的正文空間，同時容納頁眉和頁腳。

以上是如何讓動態內容Div填滿頁首和頁尾後剩餘的正文高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！