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

最新推荐文章于 2021-06-03 15:04:55 发布

原创最新推荐文章于 2021-06-03 15:04:55 发布 · 946 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #css

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

32 篇文章

订阅专栏

CSS技巧

3 篇文章

订阅专栏

本文介绍了一种常见的网页布局技巧，通过设置主内容区域的最小高度为100%并结合绝对定位，使得底部元素始终固定在页面底部，无论内容多少都能保持美观的布局。

这种功能很常见，如：

常规思路如下：

设置主内容区高度最小为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;
}