我們經常會遇到這樣的問題:如何用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賦值...