緊貼底部的頁尾

2021-09-16 20:14:22 字數 1439 閱讀 7432

在寫前端頁面時，經常會遇到這種情況：有乙個具有塊級樣式的頁尾，當頁面內容足夠長時它一切正常；有的時候，由於頁面長度不夠，頁面底部的頁尾會很尷尬的跑上來；頁尾不能像我們期望中那樣「緊貼」在視口的最底部，而是緊跟在內容的下方。

那麼怎樣做到內容多時頁尾在內容下方，內容少時頁尾「緊貼」在視口底部？我總結了四種方法。

首先我先寫乙個簡單的頁面結構，如下：



我是內容


fotter
再頁面加點公共樣式：

*


header


header,footer


main
接下來我們用四種不同的方法來實現如何讓頁尾緊貼底部。

/* footer的每一級父元素都為100%高 */


html,body 


/* 這裡將頁面內容最小高度設為100%；撐滿螢幕，


然後使用margin-bottom負值把頁尾吸上來，


最後設定底部內邊距用來填充內容過多時被遮擋的頁尾。 */


height: auto !important;


min-height: 100%;


height: 100%;


margin-bottom: -80px;


padding-bottom: 80px;


box-sizing: border-box;


}footer
方法二和方法一比較類似，只是用偽元素取代了內邊距。**如下：

html,body 


height: auto !important;


min-height: 100%;


height: 100%;


margin-bottom: -80px;


}    content: "";


display: block;


height: 80px;


}footer
方法三借助視口相關的長度單位以及calc()函式。這兩個東西都只能相容到ie9。

min-height:calc(100vh - 80px);

}footer

前三種方法都有一定的侷限性，都要給頁尾設定固定的高度，不夠靈活。有沒有更加靈活的方法呢？

當然有，那就是我們方法四了。

方法四用到了css3中的布局神器flexbox。

body 


flex: 1; 


}
這樣就可以了！我們只需要四行簡單的**，就完美實現了緊貼底部的頁尾。flexbox是不是相當霸氣？

flexbox相容性不是很好（萬惡的ie），但在移動端還是不錯的。可以放心使用。

上面是我總結的四種方法，如果還有什麼更好的方法，歡迎共同**！

DIV CSS 頁尾永遠保持在頁面底部

頁尾永遠保持在頁面底部 有時候，我們用css建立乙個高度自適應布局，如何保證頁尾 footer 在內容不超過一屏的情況下始終保持在布局最下方是乙個比較頭疼的事。我看過一些利用絕對定位的例子，但總感覺不是那麼完美，經過一下午的研究總結出乙個利用負值外補丁的方法來實現這個效果的方法，相容ie5.0 op...

DIV CSS 頁尾永遠保持在頁面底部

頁尾永遠保持在頁面底部 有時候，我們用css建立乙個高度自適應布局，如何保證頁尾 footer 在內容不超過一屏的情況下始終保持在布局最下方是乙個比較頭疼的事。我看過一些利用絕對定位的例子，但總感覺不是那麼完美，經過一下午的研究總結出乙個利用負值外補丁的方法來實現這個效果的方法，相容ie5.0 op...

如何將頁尾（footer）保持在頁面底部

將footer保持在視覺視窗的底部是常見的需求。當頁面的內容主體高度較大 超出螢幕可視區域的高度 時，footer元素直接跟在內容後面即可。但是，當乙個 html 頁面包含少量的內容時，footer元素就會坐落在頁面的中間，在下面留下空白，這看起來很糟糕，尤其是在大螢幕上。如下圖 我們先給出基礎的頁...