HTML的footer置於頁面最底部的方法

2021-06-17 20:58:28 字數 985 閱讀 5970

需求:有時候,當頁面內容較短,撐不開瀏覽器高度,但是又希望footer能在視窗最低端。

思路:footer的父層的最小高度是100%,footer設定成相對於父層位置絕對(absolute)置底(bottom:0),父層內要預留footer的高度。

把頁面中的footer部分定位到底部,不會因為內容不夠而上移,在網上找到乙個比較簡單效果又好的方法,我測試所用的的ie7、firefox、chrome都相容。

原理:為了讓瀏覽器識別高度為100%,設定html、body的height: 100%,同時把所有元素的margin和padding設定為0,這樣就等於整個瀏覽器視窗的總高度了,把footer置於最下方,這是footer就超出這「100%」的範圍了,為讓footer 能夠剛好在最下方,給footer加乙個等於自身高度的上方的負邊距(負的margin)強制把它向上推乙個自身的高度,即 margin-top: 負的數值; 。但當內容超過一屏會發現內容會覆蓋在footer的上方。所以還要給內容部分設定下方內補丁等於footer的高度,強制把內容部分向上推乙個footer的高度就ok了。

html**  

<

div>

<

divid="main-content"

>

div>

<

divid="footer"

>

div>

div>

css如下:

xml**  

height: auto;          /* 保證頁面能撐開瀏覽器高度時顯示正常*/  

min-height: 100%  /* ie6不支援,ie6要單獨配置*/  

}  #footer  

#main-content  

這時候,其它瀏覽器上都能正常顯示了,但是ie 6要另外處理:

html**  

>

<

style

>

style

>

>

頁面內容不夠高footer始終位於頁面的最底部

相信很多前端工程師在開發頁面時會遇到這個情況 當整個頁面高度不足以佔滿顯示屏一屏,頁尾不是在頁面最底部,使用者視覺上會有點不好看,想讓頁尾始終在頁面最底部,我們可能會想到用 1.min height來控制content中間內容區高度來讓頁面高度能夠佔滿顯示屏一屏,但是大型 頁面比較多的情況下foot...

CSS 設定Footer始終在頁面底部

footer顧名思義頁尾,如果內容多的時候在底部時感官很好,但是當內容變少 無法撐開一屏的時候 footer不固定在底部,影響美觀,對於已經從事前端工作的工作的來說應該是比價工作中入門級別的問題了,由於本人前端水平有限,耗費一點時間最後通過負邊距實現了這個簡單的功能,如下 flyelephant 設...

CSS實現footer固定在頁面底部

作為乙個頁面仔你一定遇到過 當乙個html頁面中含有較少的內容時,web頁面的 footer 部分隨著飄上來,處在頁面的半腰中間,給視覺效果帶來極大的影響,讓你的頁面看上去很不好看,特別是現在寬屏越來越多,這種現象更是常見。那麼如何將web頁面的 footer 部分永遠固定在頁面的底部呢?先來看下下...