首頁 > web前端 > css教學 > 如何使用 HTML 和 CSS 建立具有可捲動內容的固定頁首和頁尾?

如何使用 HTML 和 CSS 建立具有可捲動內容的固定頁首和頁尾?

Linda Hamilton
發布: 2024-12-02 12:16:11
原創
940 人瀏覽過

How to Create a Fixed Header and Footer with Scrollable Content Using HTML and CSS?

具有可捲動內容的固定頁眉和頁腳

使用以下最少的HTML 和CSS 可以實現具有可滾動內容的固定頁首和頁尾代碼。

<html>
  <body>
登入後複製
body {
  height: 100%;
  width: 100%;
}

#header {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 200px;
  right: 0px;
  overflow: hidden;
}

#content {
  position: absolute;
  top: 200px;
  bottom: 200px;
  left: 0px;
  right: 0px;
  overflow: auto;
}

#footer {
  position: absolute;
  bottom: 0px;
  height: 200px;
  left: 0px;
  right: 0px;
  overflow: hidden;
}
登入後複製

此 HTML 和 CSS 程式碼建立固定的頁首和頁腳,中間有可捲動的內容區域。頁首和頁尾具有固定高度,而內容區域可以垂直捲動。

以上是如何使用 HTML 和 CSS 建立具有可捲動內容的固定頁首和頁尾?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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