如何让动态内容Div填充页眉和页脚后剩余的正文高度？

确保动态内容 Div 填充页眉和页脚后的剩余正文高度

实现固定高度页眉和页脚后跨越剩余正文高度的内容 div一个常见的 CSS 挑战。以下综合解决方案解决了现代浏览器和 Internet Explorer 8 中的此问题。

在此示例中，将内容包装在“#wrapper”div 中，绝对定位并跨越整个视口。将“min-height”属性设置为 100%，以确保它至少占据该高度，并添加填充以考虑页眉和页脚。

将内容嵌套在“#content”div 中，并使用“min-height”为100%以占据剩余高度。给页眉和页脚固定高度，并负向调整它们的边距以补偿“#wrapper”div 中的填充。

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

此解决方案根据视口大小动态调整内容 div 的高度，确保它无缝地填充了剩余的正文空间，同时容纳页眉和页脚。

以上是如何让动态内容Div填充页眉和页脚后剩余的正文高度？的详细内容。更多信息请关注PHP中文网其他相关文章！