Sticky Footer(粘性页脚)

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

 

实现方式：

1、利用绝对定位和padding-bottom

      .container {
        position: relative;
        min-height: 100%;
        height: auto !important;
        height: 100%;
        padding-bottom: 60px;
      }
      .header {
        height: 50px;
        background-color: yellow;
      }
      .section {
        /* padding-bottom: 60px; */
      }
      .footer {
        position: absolute;
        width: 100%;
        height: 60px;
        bottom: 0;
        background-color: rgba(255, 0, 0, 0.5);
      }

    <div class="container">
      <div class="header">头部</div>
      <div class="section"></div>
      <div class="footer">底部</div>
    </div>

 　　已知footer高度为60px，通过给container或section设置padding-bottom: 60px给footer预留60px的位置，footer通过设置相对于container的绝对定位，将footer放到预留的位置上。

 

2、利用padding-bottom和margin-top负值

      .container {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        padding-bottom: 60px;
        box-sizing: border-box;
      }
      .header {
        height: 50px;
        background-color: yellow;
      }
      .section {
        /* padding-bottom: 60px; */
      }
      .footer {
        margin-top: -60px;
        height: 60px;
        background-color: rgba(255, 0, 0, 0.5);
      }

    <div class="container">
      <div class="header">头部</div>
      <div class="section"></div>
    </div>
    <div class="footer">底部</div>

　　已知footer高度为60px

　　和方法一相比，footer放到了container的外面，通过给container（注意标准盒模型的padding会挤出，这里需要设置为怪异盒模型）或section设置padding-bottom: 60px预留出footer的位置

　　方法一是使用绝对定位将footer放到预留的位置上，这里通过margin-top负值将元素本身向上拖拽60px和绝对定位效果一样

 

3、添加一个块级元素占位+margin负值

      .container {
        min-height: 100%;
        height: auto !important;
        height: 100%;
      }
      .header {
        height: 50px;
        background-color: yellow;
      }
      .placeholder {
        height: 60px;
        background-color: rgba(255, 0, 0, 0.5);
      }
      .footer {
        margin-top: -60px;
        height: 60px;
        background-color: rgba(255, 0, 0, 0.5);
      }

    <div class="container">
      <div class="header">头部</div>
      <div class="section"></div>
      <div class="placeholder">placeholder</div>
    </div>
    <div class="footer">底部</div>

　　已知footer高度为60px

　　方法一和方法二都是通过给container容器设置padding-bottom: 60px预览footer的位置，然后将footer移动到预留的位置上

　　这里添加一个块级元素高度和footer一致，预留出footer的位置，通过给footer设置margin-top: -60px将自身往上拖拽60px到了预留位置上

 

4、表格属性

      .container {
        display: table;
        width: 100%;
        min-height: 100%;
        height: auto !important;
        height: 100%;
      }
      .section {
        display: table-row;
        height: 100%;
      }
      .header {
        height: 50px;
        background-color: yellow;
      }
      .footer {
        background-color: rgba(255, 0, 0, 0.5);
      }

    <div class="container">
      <div class="header">头部</div>
      <div class="section"></div>
      <div class="footer">
        <h1>1</h1>
        <h1>1</h1>
      </div>
    </div>

　　通过设置表格属性，footer的高度可以通过内容撑开也可以设置固定高度

 

5、calc计算

      .container {
        min-height: calc(100vh - 60px);
      }
      .header {
        height: 50px;
        background-color: yellow;
      }
      .footer {
        height: 60px;
        background-color: rgba(255, 0, 0, 0.5);
      }

    <div class="container">
      <div class="header">头部</div>
      <div class="section"></div>
    </div>
    <div class="footer">底部</div>

　　已知footer高度，将footer和container同级，设置container的高度为calc(100% - 60px)

 

6、flex布局

      .container {
        display: flex;
        flex-direction: column;
        min-height: 100%;
      }
      .header {
        height: 50px;
        background-color: yellow;
      }
      .section {
        flex: 1;
      }
      .footer {
        background-color: rgba(255, 0, 0, 0.5);
      }

    <div class="container">
      <div class="header">头部</div>
      <div class="section"></div>
      <div class="footer">底部</div>
    </div>

　　container设置display: flex时将轴方向设置为垂直方向，section设置为flex: 1占满父级中除去header和footer剩下的高度

 

总结：

已知底部高度	①②③⑤
底部高度可以设置可以不设置	④⑥
需要将footer和container写成同级	②③⑤
个人建议	⑥

margin负值：https://www.cnblogs.com/wuqilang/p/15149645.html