CSS Sticky footer布局

最新推荐文章于 2023-02-13 20:45:00 发布

原创最新推荐文章于 2023-02-13 20:45:00 发布 · 313 阅读

CC 4.0 BY-SA版权

本文介绍了一种使用CSS实现sticky footer的方法，确保了当内容不足以填满整个视口时，页脚能够固定在屏幕底部；而当内容超过一屏时，页脚会自然地放置在内容的末端。

stick footer就是让footer元素固定在底部，1当内容不足满屏时，footer紧贴最底部。2，满屏需要下拉时，footer就在内容的底部
通常用于提示的页面，下面有个x的按钮，这个按钮就是footer，它是用于关闭这个弹窗的，内容少时处在底部，多时下拉才显示。保证你都看完了。

html结构

  <div class="detail">
      <div class="detail-warpper clearfix">
        <div class="detail-main">
            内容区域，随便写
        </div>
      </div>
      <div class="detail-close">x</div> //始终在底部
  </div>

css代码：

.detail{
      position: fixed; //总容器为全屏铺满 超出出现滚动条
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(7,17,27,.8);
      overflow:auto;
    }
    .detail-warpper{  //内容不够长时保证也会显示全屏
      min-height: 100%;
      width: 100%;
    }
    .detail-main{
      margin-top: 64px; //向上和屏幕顶部保持64px像素 随便设置
      padding-bottom: 64px; //保证内容区底部有空白区间 必须和footer是相同的高度
    }
    .detail-close{
      position:relative;
      height:64px;
      margin-top: -64px;//footer高度的负值
      font-size: 32px;
      color:#fff;
      text-align: center;
    }
    .clearfix{  //用clearfix 主要是为了解决有的兼容问题
      display: inline-block;
    }
    .clearfix:after{
     display: block;
     content: "";
     height: 0;
     line-height: 0;
     clear: both;
     visibility: hidden;
    }

.bb{
height:32px;
background-color:#f1ee18;/所有识别/
.background-color:#00deff\9; /IE6、7、8识别/
+background-color:#a200ff;/IE6、7识别/
_background-color:#1e0bd1;/IE6识别/
}