Sticky footers解决方案总结

在实际开发中，我们经常会遇到这样一个需求：如果页面小于一屏时，页脚块需要固定在页面底部，如果页面超过一屏时，页脚块向下推送。

这种需求很常见，也很实用，下面总结了4种方法来实现这种需求：

父级relative解决方案

当父级不要求使用fixed且footer块高度已知时比较适用，主要设置container块相对定位position:relative;footer块为绝对定位position:absolute

html结构：

    <div class="container">
      <div class="main">
        <p>正文内容</p>
      </div>
      <div class="footer">
        底部内容
      </div>
    </div>

css样式：

html,body{
    margin:0;
    height: 100%;
}
.container{
    position: relative;
    min-height: 100%;
    padding-bottom:60px;
    box-sizing: border-box;
 }
 .footer{
    height: 60px;
    position: absolute;
    left:0;
    bottom:0;
    width: 100%;
    background: #000;
    color:#fff;
 }

当内容小于一屏时，效果如下：

内容大于一屏时，效果如下：

可以看到，不论内容小于一屏还是大于一屏，footer始终固定在底部。

父级fixed解决方案

制作弹出层时，就需要将父级设为fixed，此时就需要用到如下方式了

fixed方式的html结构层级要比relative方式复杂，需要添加main-wrapper层解决当内容小于一屏时，footer依然固定在页面底部的需求。
此方式要注意设置.main{padding-bottom: 60px;}和 .footer{margin-top: -60px;}

html:

<div class="container">
    <div class="main-wrapper">
        <div class="main">
            <p>正文部分</p>
            <p>正文部分</p>
            <p>正文部分</p>
        </div>
    </div>
    <div class="footer">
        x
    </div>
</div>

css:

.container{
    position: fixed;
    z-index:2;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    color: #fff;
 }
 .main-wrapper{
    width: 100%;
    min-height:100%;
 }
 .main{
    padding-bottom: 60px;
 }
 .footer{
    margin-top: -60px;
    height: 60px;
    font-size: 30px;
    text-align: center;
 }

效果如下图：

Flexbox解决方案

Flexbox方式非常简洁，不仅html结构简单，而且footer块高度未知也适用。

重点是将父级container的display设为flex，默认情况下子元素布局为row（即横向布局），所以设置flex-direction: column;可将子元素（main和footer）设为纵向布局，然后将main块设为flex:1;因为当flex>0时，元素就会灵活的控制自己的尺寸，来适配容器的剩余空间

html:

<div class="container">
  <div class="main">
      <p>正文部分</p>
      <p>正文部分</p>
      <p>正文部分</p>
   </div>
   <div class="footer">
      x
   </div>
</div>

css:

.container{
    position: fixed;
    z-index:2;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    overflow: auto;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    background: rgba(0,0,0,0.6);
    color:#fff;
 }
 .main{
    flex: 1;
 }
 .footer{
    text-align: center;
    font-size: 30px;
 }

效果如下图：

calc函数

重点是利用calc()函数来设置main块的最小高度。其中100vh为屏幕可视高度，需要注意的是，运算符前后都需要保留一个空格。
calc()用法详解

html:

<div class="container">
  <div class="main">
      <p>正文部分</p>
      <p>正文部分</p>
      <p>正文部分</p>
   </div>
   <div class="footer">
      x
   </div>
</div>

css:

.container{
    position: fixed;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    background: rgba(0,0,0,0.5);
    color: #fff;
 }
 .main{
    min-height: calc(100vh - 60px);      //运算符-前后需要添加空格
 }
 .footer{
    text-align: center;
    font-size: 30px;
    height: 60px;
    line-height: 60px;
 }