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>

.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;
 }