移动端头部和页脚固定布局小技巧

本文介绍移动端页面布局中如何实现固定头部和页脚，并保证中间内容区域可滚动的技巧。文章详细讲解了三种CSS布局方法：Flexbox布局、圣杯布局和双飞翼布局，并重点推荐了简洁高效的Flexbox布局。通过设置`position: sticky`、`z-index`和`flex`属性，可以轻松实现头部固定顶部、页脚固定底部，以及中间内容区域可滚动的效果。 无论是新手还是经验丰富的开发者，都能从中找到合适的解决方案，提升移动端页面开发效率。

移动端页面布局：轻松实现固定头部和页脚

移动端开发中，常常需要创建固定头部和页脚，同时保证中间内容区域可滚动的页面结构。本文提供多种CSS解决方案，助您轻松解决这一布局难题。

需求分析

假设HTML结构如下：头部（class="head"）位于顶部，页脚（class="foot"）位于底部，中间内容区（class="content"）位于两者之间，并允许垂直滚动。 我们需要：

1. 头部固定在页面顶部，并具有最高层级 (z-index)。
2. 页脚固定在页面底部，同样具有最高层级 (z-index)。
3. 中间内容区可垂直滚动，层级最低。

解决方案：三种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)

经典的圣杯布局也能实现此效果，但代码相对复杂。

(代码略，与Flexbox方法实现效果相同，但CSS代码更冗长，这里不再赘述。)

3. 双飞翼布局 (Double Wing Layout)

双飞翼布局与圣杯布局类似，同样实现效果相同，但代码也相对复杂。

(代码略，与Flexbox方法实现效果相同，但CSS代码更冗长，这里不再赘述。)

总结

Flexbox 布局是实现移动端固定头部和页脚的最佳选择，代码简洁，易于维护。 其他方法虽然也能实现，但代码相对复杂，建议优先考虑Flexbox。 选择适合您项目复杂度和个人偏好的方法即可。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《移动端头部和页脚固定布局小技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。