CSS實現footer「吸底」效果

2021-09-24 06:41:41 字數 4153 閱讀 6748

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

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

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

html設定

"content">

"footer">

底部按鈕

複製**

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

原理分析

設定height為固定高度值。

適用場景

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

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

固定於頁面底部

演示demo:codepen.io/hu0950/pen/…

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

複製**

固定於可視視窗底部

演示demo:codepen.io/hu0950/pen/…

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的高度,這也是這種方式的優點。

固定於頁面底部

演示demo:codepen.io/hu0950/pen/…

原理分析

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

複製**

固定於可視視窗底部

演示demo:codepen.io/hu0950/pen/…

原理分析

除了以上(在方案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屬性。

固定於頁面底部

演示demo:codepen.io/hu0950/pen/…

原理分析:

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

複製**

固定於可視視窗底部

演示demo:codepen.io/hu0950/pen/…

原理分析:

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賦值...