如何在固定页眉和页脚的情况下实现 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中文网其他相关文章！