粘性的底部布局

傳統的底部布局，完全是靠內容高度撐開，如果內容的高度沒有達到一屏的的話，那麼底部（footer）下面必然留下空白。

相比傳統的底部布局，粘性的底部布局，可以實現，在內容的高度還未達到一屏時，底部就位於螢幕的下方，當內容高度大於一屏時，就按照正常的方式顯示。

效果如圖：

實現這個功能實際上很簡單，只需要修改一下你的html結構，然後進行特定的布局。

完整**如下所示：

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
style
>6*
7html,body,.wrap
8.wrap
9.main
10.footer
11style
>
12head
>
13<
body
>
14<
div 
class
="wrap"
>
15<
div 
class
="main"
>
16this is main
17div
>
18div
>
19<
div 
class
="footer"
>this is footer
div>
20body
>
21html
>

但是由於設定了，margin-top:-150px，則又會讓它上浮它自身的高度，這樣在內容不超過一屏高度時，footer就會在螢幕的底部。

而main設定padding-bottom:150px，則用於防止內容與上浮的footer進行重疊，另外，因為footer用了maring所以，

這裡只能用padding。防止邊距的重疊。

摘自：

粘性布局position sticky

開篇 頁面開發中常用到固定定位fixed，不過fixed會浮動脫離文件流，於是又要清除浮動，即麻煩有時又未必能夠清除浮動，於是sticky華麗出場 介紹 sticky是css3中新增的position屬性，設定了sticky的元素，在螢幕範圍 viewport 內該元素的位置並不受到定位影響 設定是...

sticky 粘性布局

position sticky sticky的中文意思是 粘性的 position sticky表現也符合這個粘性的表現。特別適合導航的跟隨定位效果。基本上，可以看出是position relative和position fixed的結合體 當元素在螢幕內，表現為relative，就要滾出顯示器螢幕...

css 粘性布局

一 粘性布局 position sticky配合 left,right,top,bottom 中乙個即可實現粘性布局 二 坑粘性布局只在其父元素空間內生效，且要實現 粘性 效果，對其父元素有以下要求，否則粘性效果會失效 1 必須滿足父元素在需要粘的軸上的空間 粘性布局子元素在需要粘的軸上的大小 例如...