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

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

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

html, body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

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

#wrapper {
  padding: 50px 0; /* Adjust to match header and footer heights */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

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

#content {
  min-height: 100%;
}

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

header {
  margin-top: -50px; /* Adjust to match header height */
  height: 50px;
}

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

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