前端必懂之Sticky Footer(粘性頁腳)

piapia 發布于2019-08-02 16:14 / 2624人閱讀

摘要：寫在最前是的一種布局場景。頁腳永遠固定在頁面的底部，頁面內容不夠長的時候頁腳黏在視窗底部，內容足夠長時會被向下移動。老式門戶網站由于內容過短常常版權頁腳前移，移動端特定布局也需要來解決這些問題。

寫在最前：Sticky Footer是css的一種布局場景。頁腳footer永遠固定在頁面的底部，頁面內容不夠長的時候頁腳黏在視窗底部，內容足夠長時會被向下移動。老式門戶網站由于內容過短常常版權頁腳前移，移動端特定布局也需要Sticky Footer來解決這些問題。

一、利用絕對定位和padding完美兼容

已知底部高度，利用絕對定位和padding完美兼容
https://codepen.io/qietuniu/pen/KYxMwv

去除標簽多余的margin,padding,給html和body設置100%

外部容器min-height為100%，使得內容少時也能撐開

主體內容設置padding-bottom，這個為底部的高度，可以使內容完全顯示否則會使主體內容有底部面積大小區域被遮擋

footer高度固定，進行絕對定位

DOM節點


  
  
  
  Copyright? 1994-2019 切圖妞

樣式代碼

html,
body {
  height: 100%;
}
.container {
  position: relative;
  min-height: 100%;
  height: auto !important;
  height: 100%; /*IE6不識別min-height*/
}
.section {
  padding-bottom: 60px;
}
.footer {
  position: absolute;
  width: 100%;
  height: 60px;
  bottom: 0px;
}

二、利用padding-bottom和margin-top完美兼容

已知底部高度，利用padding-bottom和margin-top完美兼容
https://codepen.io/qietuniu/pen/dLqpdR

去除標簽多余的margin,padding,給html和body設置100%；

外部容器min-height為100%，使得內容少時也能撐開

主體內容設置padding-bottom，這個為底部的高度

footer高度固定，margin-top的值為高度負值，footer與container同級。

DOM節點


  
  
  

Copyright? 1994-2019 切圖妞

樣式代碼

html,
body {
  height: 100%;
}
.container {
  min-height: 100%;
  height: auto !important;
  height: 100%; /*IE6不識別min-height*/
}
.section {
  padding-bottom: 60px;
}
.footer {
  position: relative;
  margin-top: -60px;
  width: 100%;
  height: 60px;
}

三、新增塊級元素填補頁腳遮擋

已知底部高度，新增塊級元素填補頁腳遮擋，實現完美兼容
https://codepen.io/qietuniu/pen/dLqpez

去除標簽多余的margin,padding,給html和body設置100%；

外部容器min-height為100%，使得內容少時也能撐開

主體內容設置margin-bottom，值為底部的高度的負值

footer位置在與container同級，section同級新增塊元素.底部和新增塊元素高度一致

DOM節點


  
  
  
  

Copyright? 1994-2019 切圖妞

樣式代碼

html,
body {
  height: 100%;
}
.container {
  min-height: 100%;
  height: auto !important;
  height: 100%; /*IE6不識別min-height*/
  margin-bottom: -60px;
}
.placeholder,
.footer {
  height: 60px;
}

四、用表格屬性實現完美兼容

底部不定高度，利用表格屬性實現完美兼容
https://codepen.io/qietuniu/pen/QPVKVR

去除標簽多余的margin,padding,給html和body設置100%

外部容器min-height為100%;使得內容少時也能撐開，display屬性設置為table

主體內容display屬性設置為table-row，高度設置為100%

DOM節點


  
  
  
  Copyright? 1994-2019 切圖妞

樣式代碼

html,
body {
  height: 100%;
}
.container {
  display: table;
  width: 100%;
  min-height: 100%;
}
.section {
  display: table-row;
  height: 100%;
}

五、calc計算

vh存在兼容有限，一般在移動端使用。100vh可代替body和html的100%來拿到視口高度實現效果
https://codepen.io/qietuniu/pen/NmLRmV

外部容器使用calc計算，100vh減去底部高度

footer位置與container同級，高度固定

主體內容display屬性設置為table-row，高度設置為100%

DOM節點


  
  
  

 Copyright? 1994-2019 切圖妞

樣式代碼

.container {
  min-height: calc(100vh - 60px);
}
.footer {
  height: 60px;
}

六、flex彈性布局

底部不定高度，利用flex彈性布局實現效果，兼容性有限建議移動端使用
https://codepen.io/qietuniu/pen/EJeNYW

外部容器display設為flex彈性布局，flex-flow設置方向為column縱向并設置最小高度為100vh

主體內容flex屬性設為1

DOM節點


  
  
  
  Copyright? 1994-2019 切圖妞

樣式代碼

.container {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}
.section {
  flex: 1
}

七、Grid網格布局

底部不定高度，利用Grid網格實現效果，兼容性有限建議移動端使用
https://codepen.io/qietuniu/pen/EJeNYW

外部容器display設為grid網格布局，grid-template-rows設置一個網格的行，fr單位可以幫助我們創建一個彈列的網格軌道,它代表了網格容器中可用的空間（就像Flexbox中無單位的值）

header頭部的位置放在主體內容內部

footer中grid-row-start和grid-row-end屬性設置單元格開始和結束的行線

DOM節點


  
  
  
  Copyright? 1994-2019 切圖妞

樣式代碼

.container {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

結語

以上方法各有優劣，根據使用場景選擇合適的方案

場景	方案
兼容性要求高	①②③
底部不固定高度	④⑥⑤⑦
PC端建議	①②
移動端建議	①②⑥

完整代碼

尊重原創，如需轉載請注明出處！

云服務器 GPU云服務器用戶粘性粘性 Sticky CSS Sticky

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54931.html

前端必懂之Sticky Footer(粘性頁腳)

摘要：寫在最前是的一種布局場景。頁腳永遠固定在頁面的底部，頁面內容不夠長的時候頁腳黏在視窗底部，內容足夠長時會被向下移動。老式門戶網站由于內容過短常常版權頁腳前移，移動端特定布局也需要來解決這些問題。 showImg(https://segmentfault.com/img/bVbrIV9?w=200&h=354); 寫在最前：Sticky Footer是css的一種布局場景。頁腳foot...

jifei 2019-08-29 18:42 評論0 收藏0
Django搭建個人博客：回到頂部浮動按鈕、矢量圖標、頁腳沉底和粘性側邊欄

摘要：本章集中介紹四個重要的小功能回到頂部浮動按鈕矢量圖標頁腳沉底和粘性側邊欄。因為我們想在全站都擁有這個按鈕，所以將剛寫好的模塊引用到中在后面引入注意模塊用到了，因此要在后面引入。本章集中介紹四個重要的小功能：回到頂部浮動按鈕、矢量圖標、頁腳沉底和粘性側邊欄。這幾個功能與Django基本沒啥關系，更多的是前端知識，但是對博客網站都很重要，問的讀者也比較多，因此也集中講一下好了。回到頂...

lovXin 2019-07-31 10:17 評論0 收藏0
CSS粘性定位是怎樣工作的

摘要：怎樣才能讓粘性定位起作用粘性定位有兩個主要部分，粘性元素和粘性容器。這是粘性元素可以浮動的最大區域。最好是在以粘性容器底部為自然位置的元素上使用它。翻譯：瘋狂的技術宅原文：https://medium.com/@elad/css-... 本文首發微信公眾號：jingchengyideng歡迎關注，每天都給你推送新鮮的前端技術文章瀏覽器對 CSS粘性定位有著非常好的支持，但很多...

Wildcard 2019-08-30 15:55 評論0 收藏0
CSS粘性定位是怎樣工作的

摘要：怎樣才能讓粘性定位起作用粘性定位有兩個主要部分，粘性元素和粘性容器。這是粘性元素可以浮動的最大區域。最好是在以粘性容器底部為自然位置的元素上使用它。翻譯：瘋狂的技術宅原文：https://medium.com/@elad/css-... 本文首發微信公眾號：jingchengyideng歡迎關注，每天都給你推送新鮮的前端技術文章瀏覽器對 CSS粘性定位有著非常好的支持，但很多...

lovXin 2019-08-02 14:14 評論0 收藏0