CSS實現footer「吸底」效果

我們經常會遇到這樣的問題：如何用css來實現底部元素可「粘住底部」的效果，對於「粘住底部」，本文有兩種理解：

一是無論內容的多少，我們都希望使按鈕，固定於可視視窗的底部，且內容區是可滾動的。

二是當內容區的內容較少時，頁尾區不是隨著內容區排布，而是始終顯示在螢幕的最下方；當內容區的內容較多時，頁尾能隨著內容區的增高而撐開，始終顯示在頁面的最底部。

html設定

"content">

"footer">

底部按鈕

複製**

說明：以下方案的實現都基於這段html結構

原理分析

設定height為固定高度值。

適用場景

所使用的屬性在各瀏覽器中都實現得很成熟，相比第

二、三種方案，較為推薦該方法。 不適用於以下的場景：定位(fixed)的區域中有文字框，因為在ios系統中，文字框呼叫輸入法時，定位的區域就會往上彈，離底部有段距離。

固定於頁面底部

css設定

html,

body
height 100%
position relative // 關鍵
box-sizing border-box
min-height 100% // 關鍵
padding-bottom 100px // 該值設定大於等於按鈕的高度
ullist-style none
liheight 100px
background lightblue
.footer
position absolute // 關鍵
bottom 0
left 0
right 0
height 100px // 設定固定高度
background orange
複製**

固定於可視視窗底部

css設定

html,

body
height 100%
box-sizing border-box
min-height 100% // 關鍵
padding-bottom 100px // 該值設定大於等於按鈕的高度
ullist-style: none
liheight 100px
background lightblue
.footer
position fixed // 使按鈕固定於可視視窗的底部
bottom 0
left 0
right 0
height 100px // 設定固定高度
background orange
複製**

flex布局結構簡單，**精簡。但flex有著相容性問題，在使用這種方式布局時需要注意。 在實現固定於頁面底部的效果時，採用這種彈性布局的思想，底部固定區域的高度可靈活設定，無需定義footer的高度，這也是這種方式的優點。

固定於頁面底部

原理分析

css設定

html,

body
height 100%
min-height 100% // 關鍵
display flex // 關鍵
flex-direction column // 關鍵
.content
flex 1 //關鍵
ullist-style none
liheight 100px
background lightblue
// 高度可不設定
.footer
padding 20px
background orange
複製**

固定於可視視窗底部

原理分析

除了以上(在方案2-固定於頁面底部中的分析)，還有以下需要注意的地方：

設定footer定位方式為fixed，並設定相應定位，即可使footer固定於可視視窗的底部。

css設定

html,

body
height 100%
display flex // 關鍵
min-height 100% // 關鍵
padding-bottom 62px // 該值設定大於等於按鈕的高度
flex-direction column // 關鍵
.content
flex 1 //關鍵
ullist-style: none
liheight 100px
background lightblue
.footer
position fixed // 關鍵
left 0
right 0
bottom 0
padding 20px
background orange
複製**

該方案不需要任何額外樣式處理，**簡潔，但遺憾的是移動端的低版本系統不相容calc屬性。

固定於頁面底部

原理分析：

css設定：

html,

body
height 100%
min-height 100% //關鍵：是min-height而不是height
.content
min-height calc(100% - 100px) //關鍵：是min-height而不是height
ullist-style none
liheight 100px
background lightblue
// 高度固定
.footer
height 100px
background orange
複製**

固定於可視視窗底部

原理分析：

css設定：

html,

body,
height 100%
.content
height calc(100% - 100px) // 關鍵：使用height，而不是min-height
overflow scroll // 關鍵
ullist-style none
liheight 100px
background lightblue
.footer
position fixed
left 0
right 0
bottom 0
height 100px
background orange
複製**

以上幾種實現方案，筆者都在專案中嘗試過，對每個方案也都給出了demo，方便大家除錯與驗證，每個實現的方法都存在限制性問題，比如需要固定頁尾高度，或不適用於移動端低版本的系統等等。大家可以根據具體的需求，選擇最適合的方案。

參考文章

CSS實現Footer置底

頁面置底就是讓網頁的footer部分始終在瀏覽器視窗的底部。實現方法 方法1 給html高度設定100 body設定min height 100 把底部絕對定位到body的底部 方法2 將內容部分的底部外邊距設定為負數，把內容的最小高度設為100 再利用內容部分的負底部外邊距值來達到當高度不滿時，頁...

純CSS實現吸頂效果

position的屬性有哪些？還有乙個position的屬性值 position sticky position sticky 粘性定位，是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位，之後為固定定位。著作權歸作者所有。注意 1 position sticky還是乙個實驗性的屬性值。著作...

js實現吸頂效果

今天在專案裡遇到乙個吸頂的需求，在這裡記錄一下js的寫法 思路 先在mounted裡用window.addeventlistener監聽一下滑鼠滾輪事件，再用getboundingclientrect top獲取需要吸頂的box距離頂部的值，判斷這個值是否 0，如果是就給全域性變數zyfixed賦值...