如何在固定頁首和頁尾的情況下實現 100% 身高 Div？

透過固定頁首和頁尾實現100% Body Height Div

初始情況：

在網頁版面中，您想要建立一個填滿整個正文高度的內容div，不包括固定高度的頁首和頁尾。

解：

1. 建立最小高度基線：

   html 與body 元素的聲明min-height: 100%;。這可確保它們擴展到整個視窗高度。

2. 為內容建立一個包裝器：

   建立一個包含所有內容的#wrapper div，不包含頁首和頁尾。將其絕對定位並將其限制為整個視窗尺寸。

3. 定義內容區域：

   在 #wrapper 內，建立一個 #content div 為主要內容。將其最小高度設為 100% 以填滿剩餘空間。

4. 定位頁眉和頁腳：

   加上頁眉和頁腳元素固定的高度和適當的顏色。使用帶有負值的 margin-top 和 margin-bottom 屬性將它們放置在 #wrapper 的上方和下方。

實作：

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

<code class="html"><div id="wrapper">
  <header>dfs</header>
  <div id="content">
  </div>
  <footer>sdf</footer>
</div></code>

此程式碼確保#content div 填滿整個正文高度，同時容納固定高度的頁眉和頁腳。它可以在現代瀏覽器和 IE8 中使用 Modernizr 腳本運行（或可以修改為使用 div 代替頁首和頁尾元素）。

以上是如何在固定頁首和頁尾的情況下實現 100% 身高 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！