当页面内容超出视口高度并出现垂直滚动条时，.content 元素的背景色仅覆盖初始视口高度而非全部内容高度，根本原因是 height: 100% 将其高度限制为父容器（.page）的视口高度，而非内容实际高度。
当页面内容超出视口高度并出现垂直滚动条时，`.content` 元素的背景色仅覆盖初始视口高度而非全部内容高度，根本原因是 `height: 100%` 将其高度限制为父容器（`.page`）的视口高度，而非内容实际高度。
在构建具有固定头部（sticky header）和底部（fixed footer）的响应式网页布局时，一个常见陷阱是：为 .content 设置 height: 100% 后，其背景色无法随滚动内容自然延展——即使文字正常显示、可滚动，绿色背景却“戛然而止”于首屏底部。这并非浏览器 Bug，而是 CSS 百分比高度计算机制的必然结果。
? 根本原因解析
CSS 中 height: 100% 的含义是“取计算后的父元素高度值”。在你的结构中：
-
.page设置了height: 100vh（即视口高度），且overflow-y: auto； -
.content作为其子元素，height: 100%→ 等价于height: 100vh； - 因此，
.content被强制截断为 100vh 高度，背景色只渲染这固定高度区域； - 而内部
<p></p>文本因未设高度限制，仍按内容流式撑开并可滚动——造成“内容可见、背景缺失”的视觉割裂。
✅ 正确解法：移除 height: 100%，让高度由内容驱动
只需删除 .content 中的 height: 100% 声明，改为依赖自然文档流：
.content {
/* height: 100%; ← 删除这一行 */
background-color: green;
margin-left: 15%;
margin-right: 15%;
}
此时 .content 的高度将自动适应内部所有段落的总高度，背景色随之完整填充整个内容区域，无论滚动多远。
⚠️ 关键注意事项
-
勿滥用
min-height: 100%：在.page已设100vh且启用overflow-y: auto的前提下，.content不需要任何高度约束；强行添加min-height: 100%可能引发双滚动条或布局错位。 -
确保父容器不截断内容：检查
.page是否存在max-height或overflow: hidden（当前代码中overflow-y: auto是正确的）。 -
margin 不影响高度计算：
.content的左右margin属于盒模型外部空间，不影响背景色延展逻辑，可安全保留。 - 兼容性无忧：该方案基于 CSS 标准流行为，兼容所有现代浏览器及 IE11+。
? 进阶建议：增强可维护性
若未来需为 .content 添加内边距或阴影，推荐使用 padding 替代 margin（避免外边距塌陷风险），并配合 box-sizing: border-box（你已在全局重置，无需额外操作）：
.content {
background-color: green;
padding: 0 15%; /* 更语义化：用 padding 实现左右留白 */
}
至此，绿色背景将如预期般完整包裹全部滚动内容——从“THIS IS THE BEGINNING”到“THE END THE END”，一气呵成。记住：让内容决定高度，而非用百分比去“猜测”高度，这是构建健壮滚动布局的核心原则。
