如何使内容 Div 填充正文高度的 100%（不包括固定页眉和页脚）？

如何设置内容 Div 占据正文高度的 100%（不包括固定高度的页眉和页脚）

CSS 允许您定义精确的以及网页的多功能布局。一个常见的挑战是将内容区域设置为占据页面的整个高度，同时排除页眉和页脚等固定高度元素占用的空间。本指南提供了使用纯 CSS 的全面解决方案，该解决方案兼容所有现代浏览器。

HTML 结构包括页眉、内容 div 和页脚。在 CSS 中，我们首先确保 html 和 body 元素的最小高度为 100%，并且没有边距或填充。

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

为了定位内容区域，我们引入了一个跨越 #wrapper div使用绝对定位的整个视口。

<code class="css">#wrapper {
  padding: 50px 0; /* Adjust to match header and footer heights */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}</code>

在#wrapper 内部，我们定义最小高度为100% 的内容div (#content)。这可确保它填充整个可用空间。

<code class="css">#content {
  min-height: 100%;
}</code>

为了考虑页眉和页脚高度，我们使用负边距来抵消它们。

<code class="css">header {
  margin-top: -50px; /* Adjust to match header height */
  height: 50px;
}

footer {
  margin-bottom: -50px; /* Adjust to match footer height */
  height: 50px;
}</code>

这种方法可确保content div 占据了页眉和页脚固定高度后剩余的空间，从而形成无缝且动态的布局，适应不同的屏幕尺寸和设备方向。

以上是如何使内容 Div 填充正文高度的 100%（不包括固定页眉和页脚）？的详细内容。更多信息请关注PHP中文网其他相关文章！