如何將頁腳定位在具有固定頁首的頁面底部？

將頁腳定位在固定頁眉的頁面底部

了解問題和要求：

您尋求將頁腳定位在頁面的絕對底部，即使有固定的頁首也是如此。這消除了使用位置：固定或將頁腳放在可見螢幕的底部。

Ryan Fait 的黏性頁腳方法：

我們將採用Ryan Fait 的方法作為它滿足您的具體要求條件：

步驟：

1. 將HTML和正文高度設定為 100%： 為 定義高度：100%和建立 100% 視口高度。
2. 為內容指定 100% 最小高度： 為 #content 指定最小高度：100% 以確保它佔據整個視窗高度。
3. 絕對定位頁腳並偏移內容： 將頁腳定位在下方#content，給#content一個負的margin-bottom，等於頁尾的高度。然後，將#footer絕對放置在#content上方。

4. 防止內容與頁腳重疊：兩個選項：

   • 間隔符元素： 新增
   • 間隔符元素： 新增
     Padding-Bottom 和Box-Sizing: 在#content 上使用padding-bottom: 100px 和 box-sizing: border-box （使用正確的供應商前綴）。

     新增標題：
     2. 正常標題流程： 正常流程中的標頭，將其嵌套在#content 中。

     絕對定位標頭：

     要絕對定位標頭，請相應調整 #content 的 padding-top。

     現代方法Box-Sizing:

     現代瀏覽器完全支援 box-sizing: border-box，這樣就不再需要 spacer 元素了。然而，使用間隔元素仍然適合更廣泛的瀏覽器相容性。

     結論：

     這種方法提供了一個強大的解決方案，可以將頁腳定位在頁面底部，並使用固定標題，確保在所有設備上實現最佳顯示。

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