首頁 > web前端 > css教學 > 如何將頁腳貼在固定頁首的頁面底部?

如何將頁腳貼在固定頁首的頁面底部?

DDD
發布: 2024-12-08 21:04:15
原創
994 人瀏覽過

How to Stick a Footer to the Bottom of a Page with a Fixed Header?

如何將頁腳放置在具有固定頁眉的頁面底部

為了將頁腳放置在底部頁面的頁眉雖然也有固定的頁眉,但有必要採用一種不依賴「位置:固定」的方法,該方法會將頁腳相對於

利用Ryan Fait 的方法

Ryan Fait 的方法對於頁眉和頁腳都是固定的場景來說簡單而有效heights:

  1. 設定兩個的高度和元素設定為100%。
  2. 將 #content 元素的最小高度設定為 100%,以將 #footer 推向頁面下方。
  3. 在 #content 上使用負 margin-bottom 來拉動頁腳到底部。
  4. 調整頁腳相對於 #content 的位置,以確保它出現在頂部。
  5. 在 #content 上新增間隔或使用 padding-bottom 和 box-sizing 來管理多餘的內容並防止其與頁腳重疊。

合併標題

如果標題應保留在其正常流程中,只需將其新增至#content 即可。要絕對定位,您可以使用 spacer 或 padding-top 和 box-sizing 的組合。

相容的瀏覽器和替代方案

現代瀏覽器支援 box -sizing:邊框。為了獲得更廣泛的瀏覽器支持,請考慮使用間隔元素。

以上是如何將頁腳貼在固定頁首的頁面底部?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板