CSS 實現頭部、頁腳滾動和固定

在一般的網站中都會有頭部和頁腳。

頭部會一直固定在最上面位置。

頁腳呢，當頁面內容超出一屏時，頁腳在內容最后，當不足一屏時，在頁面最下面。

實現方式有很多。這里使用的是 position:sticky;

sticky

sticky 粘性定位。是css新增的一個position屬性。

為什么說是粘性定位，從適用場景來看：一開始顯示，滾動到一定位置需要顯示的元素。

在沒有達到設置的粘着位置時，和正常元素一樣，達到粘着距離，就好一直保持這個位置。

使用注意事項：

　　1、父元素不能有 overflow 屬性

　　2、left、top、right、bottom 必須要有一個

　　3、僅在父元素內生效，父元素的高度必須大於 sticky 元素高度

　　4、兼容加 -webkit 前綴

下面是最簡單的 header 使用：

.header{
  position:sticky;
  top:0;    
}

實現

下面是實現，頭部和頁腳的滾動和固定。

HTML 部分：

  <div class="layout">
    <div class="header">
    </div>

    <div class="footer">
    </div>
  </div>

CSS 部分：

.layout {
  width: 100%;
  min-height: 100%;    // 這是為了 footer 在內容不足時能在最下面
  // height: 100%;  // 設置遮蓋屬性，sticky 超過這個高度就會消失

  .header {
    position: sticky;
    top: 0;
    display: flex;
    width: 100%;
    height: 80px;
  }

  .footer {
    position: sticky;
    top: calc(100% - 80px);
    height: 80px;
  }
}