如何將頁尾固定在網頁底部？

如何將頁腳固定在頁面底部

許多網站都會遇到頁腳沒有固定在頁面底部的問題頁面，尤其是內容較少的頁面。為了確保頁腳保持在頁面底部，無論螢幕大小或內容長度如何，這裡有一個 CSS 解決方案：

#footer {<pre class="brush:php;toolbar:false">position: fixed;
height: 50px;
background-color: red;
bottom: 0px;
left: 0px;
right: 0px;
margin-bottom: 0px;

}

此程式碼將以下屬性指派給footer:

• 位置：將頁腳的位置設為固定，確保無論頁面的滾動位置如何，它都保持在原位。
• 高度：指定高度頁腳。
• background-color：調整頁腳的背景顏色以用於演示目的。
• bottom：定位頁腳的下緣距頁面底部 0 像素。
• 左：將頁腳的左邊緣與頁面的左邊緣對齊。
• 右：將頁腳的右邊緣與頁面的右邊緣對齊。
• margin-bottom：刪除任何不需要的下邊距。

至確保內容不與固定頁腳重疊，可以對body 元素應用額外的CSS 規則：

body {<pre class="brush:php;toolbar:false">margin-bottom: 50px;

}

這會在正文中加入50像素的下邊距，為固定頁腳建立空間顯示。

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