其他分享
首页 > 其他分享> > Sticky Footer(粘性页脚)

Sticky Footer(粘性页脚)

作者:互联网

Sticky Footer:页脚footer永远在页面的底部,内容不够长时footer停留在底部,内容撑满时将footer往下挤,footer仍然停留在底部。

 

实现方式:

1、footer高度固定,利用绝对定位和padding-bottom

      .container {
        position: relative;
        min-height: 100%;
        height: auto !important;
        /*IE6不识别min-height*/
        height: 100%;
      }
      .header {
        height: 50px;
        background-color: skyblue;
      }
      .section {
        padding-bottom: 60px;
      }
      .footer {
        position: absolute;
        width: 100%;
        height: 60px;
        bottom: 0;
        background-color: red;
      }
    <div class="container">
      <div class="header">头部</div>
      <div class="section"></div>
      <div class="footer">底部</div>
    </div>

 

2、

 

 

 

 

 

 

标签:footer,Footer,页脚,100%,bottom,Sticky,底部,height
来源: https://www.cnblogs.com/wuqilang/p/15153473.html