### [移动端页头不铺满：三个检查点](https://www.huociguo.com/article/1584)

**Published:** 2026-10-01T10:27:32

**Author:** 米了

**Excerpt:** header、nav、footer 在窄屏只占内容宽度，多数是 flex 交叉轴对齐、残留定位与盒模型三处。含…

卡片类项目里，页头、导航与页脚在桌面端正常，到窄屏只占中间一段宽度。成因集中在三处，按检查成本从低到高排列。

![俯拍桌面上的笔记本电脑，用于说明移动端页面的宽度适配](https://api.huociguo.com/wp-content/uploads/2026/10/d7.jpg)

窄屏下的宽度问题通常来自容器的对齐方式

## 检查点一：交叉轴对齐

```css
.page {
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* 缺省值即 stretch */
}
```

纵向 flex 容器的交叉轴是水平方向，缺省的 stretch 会让子项铺满宽度；一旦被写成 `center` 或 `flex-start`，子项就收缩到内容宽度。出现只占中间一段的现象时先看这一条。

## 检查点二：残留的定位与宽度声明

```css
header, nav, footer {
  width: 100%;
  max-width: none;
  position: static;
}
```

调试阶段留下的 `position: absolute` 会让元素脱离正常流，宽度改由内容或定位偏移决定；`max-width` 的遗留取值也会在窄屏上提前封顶。两者一起清掉，宽度回到 100%。

## 检查点三：盒模型与溢出

```css
*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; }
```

默认 content-box 下，padding 与 border 会额外增加宽度，配合 100% 宽度直接溢出并产生横向滚动条。全局设 border-box，并清掉 body 的默认外边距。

## 排查顺序

1.  确认父容器的 align-items 取值；
2.  确认元素自身有没有残留定位或 max-width；
3.  确认 box-sizing 与 body 外边距；
4.  确认视口 meta 标签存在且未锁定缩放。

**Tags:** 全宽布局, 响应式布局, 弹性布局, 盒模型, 页头页脚

**Categories:** HTML5

---