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

如何將頁腳保留在頁面底部並固定頁首?

Linda Hamilton
發布: 2024-12-09 03:33:18
原創
213 人瀏覽過

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

將頁腳保留在頁面底部並使用固定頁眉

問題:

題目>您希望將頁腳放置在頁面的最底部,所有其他內容的下方,並保留它滾動時就位,而不像固定位置那樣粘在屏幕上。

解決方案:

Ryan Fait 方法

這種方式適用於頁眉和頁腳高度固定的場景。涉及:
  1. 設定的高度和到 100% 以確保下一步有效。
  2. 給予
    ;包含頁面內容 (#content) 的最小高度為 100%。
  3. 透過對 #content 施加等於頁腳高度的負 margin-bottom 並將其位置設為相對位置來向上拉動頁腳。
  4. 在 #content 末尾添加 spacer 元素或使用 padding-bottom 和 box-sizing: border-box 的組合來防止內容隱藏在 #content後面

    添加頁眉

    要在保持頁腳位置的同時包含頁眉:
    1. 將頁眉添加到#content 如果它應該保持正常串流。
    2. 如果標題需要絕對定位,請新增間隔符或使用 padding-top 和 box-sizing: border-box 來防止內容重疊。

    注意事項:

    • 現代瀏覽器支援box-sizing :邊框框,但如果需要更廣泛的支持,請使用間隔符。
    • 確保頁首和頁尾此方法的工作高度是固定的。

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

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