如何使用CSS在移動頁面中實現固定頭部和頁腳以及可滾動內容區的佈局？

移動端頁面：固定頭部、底部及可滾動內容區的CSS佈局方案

移動端開發中，常見需求是：頁面頭部和底部固定，中間內容區域可上下滾動。本文將介紹幾種CSS佈局方法來實現此效果。 假設HTML結構包含頭部（ .head ）、內容區（ .content ）和頁腳（ .foot ）三個部分。

解決方案

1. position: fixed;固定定位法

此方法利用固定定位固定頭部和底部，內容區則可滾動。

 html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* 確保頭部在內容之上*/
  background-color: #f8f8f8;
  padding: 10px;
}

.content {
  flex: 1; /* 佔據剩餘空間*/
  overflow-y: auto;
  padding-top: 50px; /* 考慮頭部高度*/
  padding-bottom: 50px; /* 考慮底部高度*/
}

.foot {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* 確保底部在內容之上*/
  background-color: #f8f8f8;
  padding: 10px;
}

.head和.foot使用position: fixed;固定， z-index保證其在內容之上。 .content使用flex: 1;佔據剩餘空間， overflow-y: auto;實現滾動。 padding-top和padding-bottom避免內容被頭部和底部遮擋。

2. Flexbox 彈性盒子佈局法

Flexbox 也能輕鬆實現此佈局。

 html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.head {
  flex-shrink: 0; /* 防止頭部收縮*/
  height: 50px; /* 固定頭部高度*/
  background-color: #f8f8f8;
  padding: 10px;
}

.content {
  flex: 1; /* 佔據剩餘空間*/
  overflow-y: auto;
  background-color: #ffffff;
}

.foot {
  flex-shrink: 0; /* 防止底部收縮*/
  height: 50px; /* 固定底部高度*/
  background-color: #f8f8f8;
  padding: 10px;
}

頭部和底部使用flex-shrink: 0;防止其收縮， height屬性設置固定高度。 .content使用flex: 1;佔據剩餘空間，並設置滾動。

3. Grid 網格佈局法

Grid 佈局同樣適用。

 html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  grid-template-rows: 50px 1fr 50px; /* 定義頭部、內容區、底部高度*/
}

.head {
  background-color: #f8f8f8;
  padding: 10px;
}

.content {
  overflow-y: auto;
  background-color: #ffffff;
}

.foot {
  background-color: #f8f8f8;
  padding: 10px;
}

grid-template-rows直接定義了頭部、內容區和底部的行高， 1fr表示內容區佔據剩餘空間。 .content設置滾動。

以上三種方法都能實現目標佈局，選擇哪種方法取決於個人偏好和項目需求。 記得根據實際情況調整頭部和底部的高度以及樣式。

以上是如何使用CSS在移動頁面中實現固定頭部和頁腳以及可滾動內容區的佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！