如何在移動頁面上實現固定頭部和頁腳以及滾動內容區的CSS布局？

移動端頁面：固定頭部、頁腳與可滾動內容區

構建一個移動端頁面，使其頭部和頁腳固定，而中間內容區域可滾動，是常見的設計需求。本文將探討幾種css布局方法來實現這一效果。假設html結構如下，需要在移動端實現固定頭部和頁腳，中間內容區可上下滾動：

<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"> <!-- 固定頭部 --> <!-- 可滾動內容區 --> <!-- 固定頁腳 -->

以下三種css布局方案均可實現目標效果：

1. 圣杯布局 (Holy Grail Layout): 經典的三欄布局，利用絕對定位和負邊距實現固定區域與滾動內容區域的分離。

2. 雙飛翼布局 (double Wing Layout): 與圣杯布局類似，但通過在內容區外層添加包裹層，實現更靈活的布局控制。

   立即學習“前端免費學習筆記（深入）”；

3. flexbox布局: 現代CSS布局模塊，使用flex-direction: column和flex-grow屬性，輕松實現頭部、頁腳固定，內容區可滾動的效果。

這三種方法都能滿足需求，選擇哪種取決于具體項目和個人偏好。 只需根據實際情況微調即可。