本文介绍一种纯 css 方案，使页眉严格保持在视口宽度减去左右边距后的范围内，且不受页面水平滚动影响；同时确保页眉随页面整体滚动（非固定定位），而下方内容可自由横向溢出并触发滚动条。
本文介绍一种纯 css 方案，使页眉严格保持在视口宽度减去左右边距后的范围内，且不受页面水平滚动影响；同时确保页眉随页面整体滚动（非固定定位），而下方内容可自由横向溢出并触发滚动条。
在构建响应式、支持宽内容滚动的布局时，一个常见但易被忽视的需求是：页眉需视觉上“居中”于视口（扣除边距），但又不能随宽内容一起横向拉伸——即页眉宽度应始终基于当前视口可用宽度（100vw 减去滚动条宽度），而非文档总宽度。
关键在于理解浏览器行为：当页面出现垂直滚动条时，100% 宽度在 body 或块级上下文中默认指代 含滚动条的视口宽度（即滚动条已占用部分空间），而 100vw 则恒为视口原始宽度（不含滚动条）。因此，直接使用 width: 100% 并配合 margin 是更可靠的选择，它能天然适配滚动条出现/消失时的宽度变化。
以下是推荐实现方案（语义清晰、无 JS、兼容现代浏览器）：
:root {
--header-margin-x: 1.25rem; /* 统一维护边距变量 */
}
body {
margin: 0;
/* 确保 body 不产生额外滚动，由子元素控制 */
}
.header {
margin: 0 var(--header-margin-x);
width: calc(100% - 2 * var(--header-margin-x)); /* 核心：100% 基于含滚动条的视口 */
height: 50px;
background-color: orange;
box-sizing: border-box; /* 确保 padding 不影响宽度计算（如有需要） */
}
.content {
margin: 0 var(--header-margin-x); /* 与 header 水平对齐 */
border: 1px solid black;
box-sizing: border-box;
}
.inner {
background-color: lightblue;
width: 5000px; /* 故意超宽，触发水平滚动 */
height: 3000px;
margin: 1.25rem; /* 内部间距，不影响外层 content 宽度 */
}
<div class="header"></div> <div class="content"> <div class="inner"></div> </div>
✅ 为什么有效？
-
width: 100%在.header上解析为「当前包含块（即body）的可用宽度」，而body的宽度在存在垂直滚动条时会自动收缩（滚动条属于body的一部分），因此100%天然等于视口宽度 − 滚动条宽度； -
margin: 0 var(--header-margin-x)将页眉水平居中于该收缩后的宽度内，无需手动估算滚动条宽度（通常17px，但因系统/缩放而异）； -
.content同样使用相等的margin，保证视觉对齐，且其内部宽内容（.inner）可自由溢出，触发页面级滚动条 —— 此时页眉仍随页面一同滚动，位置关系不变。
⚠️ 注意事项：
- 避免给
.header设置position: fixed或sticky，否则将脱离文档流，无法响应页面滚动； - 不要使用
100vw替代100%（例如calc(100vw - 2 * var(--header-margin-x))），因为100vw始终包含滚动条空间，会导致页眉在滚动条出现时轻微溢出； - 若需支持旧版 IE，可降级为固定像素值（如
calc(100% - 32px)），但会牺牲滚动条宽度自适应能力； - 确保
body无overflow: hidden或overflow-x: hidden，否则会抑制水平滚动，使宽内容不可见。
此方案简洁、健壮，完美分离了页眉的视口约束逻辑与内容区的自由扩展能力，是构建专业级可滚动布局的 CSS 实践范例。
