首页 > web前端 > css教程 > 正文

如何将 Div 高度设置为正文的 100% 减去固定高度页眉和页脚?

Susan Sarandon
发布: 2024-10-30 19:02:02
原创
160 人浏览过

How to Set a Div Height to 100% of Body Minus Fixed-Height Header and Footer?

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!