將頁腳保留在頁面底部並使用固定頁眉
問題:
題目>您希望將頁腳放置在頁面的最底部,所有其他內容的下方,並保留它滾動時就位,而不像固定位置那樣粘在屏幕上。
解決方案:
Ryan Fait 方法
這種方式適用於頁眉和頁腳高度固定的場景。涉及:
- 設定的高度和到 100% 以確保下一步有效。
- 給予
;包含頁面內容 (#content) 的最小高度為 100%。
- 透過對 #content 施加等於頁腳高度的負 margin-bottom 並將其位置設為相對位置來向上拉動頁腳。
- 在 #content 末尾添加 spacer 元素或使用 padding-bottom 和 box-sizing: border-box 的組合來防止內容隱藏在 #content後面
添加頁眉
要在保持頁腳位置的同時包含頁眉:
- 將頁眉添加到#content 如果它應該保持正常串流。
- 如果標題需要絕對定位,請新增間隔符或使用 padding-top 和 box-sizing: border-box 來防止內容重疊。
注意事項:
- 現代瀏覽器支援box-sizing :邊框框,但如果需要更廣泛的支持,請使用間隔符。
- 確保頁首和頁尾此方法的工作高度是固定的。
以上是如何將頁腳保留在頁面底部並固定頁首?的詳細內容。更多資訊請關注PHP中文網其他相關文章!