首頁 > web前端 > css教學 > 如何將頁尾固定在網頁底部?

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

DDD
發布: 2024-12-16 10:55:17
原創
972 人瀏覽過

How to Fix a Footer to the Bottom of a Web Page?

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

許多網站都會遇到頁腳沒有固定在頁面底部的問題頁面,尤其是內容較少的頁面。為了確保頁腳保持在頁面底部,無論螢幕大小或內容長度如何,這裡有一個 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中文網其他相關文章!

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