如何将 Div 设置为 100% 正文高度（不包括固定高度的页眉和页脚）？

将 Div 设置为 100% 正文高度，不包括固定高度的页眉和页脚

CSS 可以对网页布局进行优雅的控制。一种常见的要求是以 100% 的正文高度显示内容，同时排除固定高度的页眉和页脚占用的空间。实现这种效果需要细致的 CSS 实现，以确保跨浏览器兼容性。

一个万无一失的解决方案是将 html 和 body 设置为 min-height: 100%;，确保页面尽可能扩展。然后，应该创建一个具有绝对定位和填充的包装 div，以适应页眉和页脚的高度。在此包装器中，#content div 可以设置为 min-height: 100%;，使其填充剩余空间。

为了确保页眉和页脚保持固定，margin-top: -50px;和边距底部：-50px；被应用，有效地抵消了添加到包装纸上的填充。这些负边距值将页眉和页脚推到包装器 div 之外，给人一种它们悬浮在内容上方和下方的错觉。

此技术已经过测试并证明可以在现代浏览器甚至 Internet Explorer 8 上使用使用 Modernizr（或者如果 Modernizr 不可用，则只需用 div 替换页眉和页脚元素）。带有实例的代码片段可用于进一步说明。

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