如何將 Div 高度設定為正文的 100% 減去固定高度頁首和頁尾？

將Div 高度設定為Body 的100% 減去固定高度頁眉和頁腳

如果您要設定內容div 100% 的正文高度（不包括固定高度的頁首和頁尾元素），採用CSS 是理想的解決方案。這是一種跨瀏覽器的防彈技術：

<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;
}

p {
  margin: 0;
  padding: 0 0 1em 0;
}</code>

讓我們分解一下這種方法的關鍵元素：

• 絕對定位： # wrapper div絕對定位，允許其拉伸到視窗的整個高度。
• 負邊距： 頁眉和頁腳元素使用負邊距來重疊 #wrapper。這會產生它們被固定的錯覺，同時為 #content div 提供必要的空間。
• 最小高度： #wrapper 和 #content div 的最小高度都設定為 100%。這可確保它們填滿頁首和頁尾未佔用的剩餘空間。

此技術提供了一種跨瀏覽器解決方案，可可靠地將內容 div 設定為正文高度的 100%，減去固定值 -頁首和頁尾元素的高度。

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