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

2021-09-28 22:13:03 字數 599 閱讀 6748

相信很多前端工程師在開發頁面時會遇到這個情況:當整個頁面高度不足以佔滿顯示屏一屏,頁尾不是在頁面最底部,使用者視覺上會有點不好看,想讓頁尾始終在頁面最底部,我們可能會想到用:

1.min-height來控制content中間內容區高度來讓頁面高度能夠佔滿顯示屏一屏,但是大型**頁面比較多的情況下footer都是模組化新增進去的,每個頁面高度都不會一樣,不可能去設定每個頁面中間內容區min-height高度,而且使用者的顯示屏的大小都不一樣,無法精確設定min-height高度,無法保證使用者看到頁面頁尾不是在最底部或頁面不出現滾動條;

2.頁尾固定定位:頁尾相對於body固定定位會顯示在最底部,但是頁面有滾動條時,頁面滾動,頁尾會懸浮在內容區上,可能以上都不是你想要的效果。

可以用下例項方法解決你的問題:

"container

">

header

class="

main

">main

footer

更多專業前端知識,請上

【猿2048】www.mk2048.com

CSS 設定Footer始終在頁面底部

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

CSS 設定Footer始終在頁面底部

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

vue專案設定footer始終處於頁面底部

相信很多前端開發工程師會遇到這樣乙個問題 在我們開發也免得時候總是會把footer部分元件化,但是由於我們的開發頁面內容不夠,這時候我們會想到採用定位的方式,但是當我們的頁面的高度超過頁面的高度的時候這種定位的方式很顯然是存在問題的。就像上面這種頁面高度不夠footer在中間。接下來給提供一種我自己...