如何將頁尾(footer)保持在頁面底部

2021-10-23 18:09:26 字數 525 閱讀 3088

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

如下圖:

我們先給出基礎的頁面**:

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

footertitle

>

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

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

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

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

最小高度100 頁尾保持在底部的布局方法

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