CSS實現Footer置底

2021-07-27 07:33:25 字數 737 閱讀 2772

頁面置底就是讓網頁的footer部分始終在瀏覽器視窗的底部。

實現方法:

方法1:給html高度設定100%,body設定min-height:100%,把底部絕對定位到body的底部

方法2:將內容部分的底部外邊距設定為負數,把內容的最小高度設為100%,再利用內容部分的負底部外邊距值來達到當高度不滿時,頁尾保持再視窗底部,當高度超出則隨之推出的效果。

這個方法需要容器裡有額外的佔位元素(如.push)

方法3:將頁尾的頂部外邊距設為負數

在容器上使用負margin-top,給內容外增加父元素,並讓內容部分的底部內邊距與頁尾高度的值相等。

content

這個方法需要多新增乙個包裹層

方法4:使用calc()設定內容的高度

content

方法5:使用flexbox彈性盒布局

以上三種方法的footer高度都說固定的,通常來說不利於網頁布局:內容會改變,它們都說彈性的,一旦內容超出固定高度就會破壞布局,所以給footer使用flexbox,讓它的高度可以變大變小。

以上方法,第一種方法是自己總結的,其他方法是參考文章《css 5種方式實現footer置底》

CSS實現footer「吸底」效果

我們經常會遇到這樣的問題 如何用css來實現底部元素可 粘住底部 的效果,對於 粘住底部 本文有兩種理解 一是無論內容的多少,我們都希望使按鈕,固定於可視視窗的底部,且內容區是可滾動的。二是當內容區的內容較少時,頁尾區不是隨著內容區排布,而是始終顯示在螢幕的最下方 當內容區的內容較多時,頁尾能隨著內...

iOS UILabel 文字 置頂 置底 實現

ios uilabel控制項預設文字位置是居中的,如圖所示 但是我們經常碰到這樣的需求,希望文字向上置頂,或者向下置底,但是很遺憾,ios api中並沒有提供相應的屬性和方法,需要我們手動設定。利用分類 category 為uilabel新增屬性 istop 和 isbottom來控制文字是否置頂和...

jquery實現置頂和置底特效

今天用用jquery實現置頂和置底特效是一款非常實用的效果,當你 的內容多的時候,它就可以用上場了,有了它之後你就不用滾動你的滑鼠就可以實讓頁面的滾動條滾動到頂部和底部,用法很簡單,不說了 1 function else 9 10 updown up click function 800 11 up...