页面内容不足时底部栏仍能在底部

最新推荐文章于 2020-10-10 18:10:16 发布

tonyhzw

最新推荐文章于 2020-10-10 18:10:16 发布

阅读量855

点赞数

分类专栏： web开发 CSS技巧文章标签： web css

本文链接：https://blog.csdn.net/datou0529/article/details/68950694

版权

web开发同时被 2 个专栏收录

32 篇文章 1 订阅

订阅专栏

CSS技巧

3 篇文章 0 订阅

订阅专栏

这种功能很常见，如：

常规思路如下：

设置主内容区高度最小为100%，此时footer在主内容区中永远处于最下方；

<html>
  <body>
    <div class="main-container">
      <div class="header"></div>
      <div class="footer"></div>
    </div>
  </body>
</html>

html,body{
   height:100%;
}
.main-container{
  min-height:100%;
  _height:100%;/*IE6*/
  position:relative;
  padding-bottom:38px;/*底部元素的高度，具体有略微差别*/
}
.footer{
  position:absolute;
  bottom:0;
  width:100%;/*占据宽度，否则以内容区宽度为准*/
  height:38px;
}