css讓footer始終位於頁面的最底部

2021-08-07 07:34:49 字數 950 閱讀 7615

提出問題:

怎麼讓footer定位在頁面底部,要求主體內容少的時候footer在視覺化視窗的最下方,主體內容非常多的時候

footer在主體內容的下面?

嘗試解決:

方法1.如果把footer直接放在主體內容後面,讓主體撐開把footer撐到下面去,主體內容多了可以,但是內容少了的話

,footer撐不起來就會顯示在中間很難看

方法2.如果直接把footer懸浮起來固定在螢幕最下方,主體內容少了沒事,內容多了,footer就會遮住主體內容

(relative/absolute/fixed都不行) (relative/absolute內容少的時候,footer會跑到頁面之間去,

fixed在內容多的時候會遮住主題內容區域)

都不行!

只能用flex布局,或者借助js

html**結構為:

第一種情況:footer隨著進度條的滾動而滾動

.container

.body

.footer

.body

.footer

第三種情況:讓footer固定在底部**自阮一峰老師部落格)

可以使用flex布局,讓footer固定在底部。有時,頁面內容太少,無法佔滿一屏的高度,底欄就會抬高到頁面的中間。這時可以採用flex布局,讓底欄總是出現在頁面的底部。

注意的問題:設為flex布局以後,子元素的float、clear和vertical-align屬性將失效。

//html**如下

......

...//css**如下

.site

.site-content

ps:解釋一下vh: vh是相對於視窗的高度,視窗高度是100vh;視窗是指瀏覽器內部可視區的大小,window.innerwidth、window.innerheight大小。

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

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

CSS 設定Footer始終在頁面底部

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

CSS 設定Footer始終在頁面底部

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