移动端页面布局：轻松实现固定头部和页脚
移动端开发中，常常需要创建固定头部和页脚，同时保证中间内容区域可滚动的页面结构。本文提供多种CSS解决方案，助您轻松解决这一布局难题。
需求分析
假设HTML结构如下：头部（class="head"）位于顶部，页脚（class="foot"）位于底部，中间内容区（class="content"）位于两者之间，并允许垂直滚动。 我们需要：
- 头部固定在页面顶部，并具有最高层级 (z-index)。
- 页脚固定在页面底部，同样具有最高层级 (z-index)。
- 中间内容区可垂直滚动，层级最低。
解决方案：三种CSS布局方法
以下三种方法都能实现目标布局：
1. Flexbox 布局 (推荐)
Flexbox 提供简洁高效的布局方式，尤其适合此类场景。
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column; /* 垂直排列 */
}
.head {
position: sticky; /* 或 fixed, sticky更灵活 */
top: 0;
width: 100%;
height: 50px;
background-color: #f0f0f0;
z-index: 10; /* 设置层级 */
}
.content {
flex: 1; /* 占据剩余空间 */
overflow-y: auto; /* 允许垂直滚动 */
}
.foot {
position: sticky; /* 或 fixed */
bottom: 0;
width: 100%;
height: 50px;
background-color: #f0f0f0;
z-index: 10; /* 设置层级 */
}
position: sticky 让元素在滚动到特定位置之前保持相对定位，之后变为固定定位，比fixed更灵活。
2. 圣杯布局 (Holy Grail Layout)
经典的圣杯布局也能实现此效果，但代码相对复杂。
移动端UI&微信UI YDUI Touch
下载
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
(代码略，与Flexbox方法实现效果相同，但CSS代码更冗长，这里不再赘述。)
3. 双飞翼布局 (Double Wing Layout)
双飞翼布局与圣杯布局类似，同样实现效果相同，但代码也相对复杂。
(代码略，与Flexbox方法实现效果相同，但CSS代码更冗长，这里不再赘述。)
总结
Flexbox 布局是实现移动端固定头部和页脚的最佳选择，代码简洁，易于维护。 其他方法虽然也能实现，但代码相对复杂，建议优先考虑Flexbox。 选择适合您项目复杂度和个人偏好的方法即可。
