如何将 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中文网其他相关文章！