当 .main 元素设置 height: 100% 但其父容器（如 body）未定义明确高度时，该元素实际高度会被强制约束为视口高度，超出部分虽可滚动，但背景色和边框因“无高度承载”而被裁剪——移除 height: 100% 并改用默认 height: auto 即可让容器随内容自然伸展，彻底解决视觉截断。
当 `.main` 元素设置 `height: 100%` 但其父容器（如 `body`）未定义明确高度时，该元素实际高度会被强制约束为视口高度，超出部分虽可滚动，但背景色和边框因“无高度承载”而被裁剪——移除 `height: 100%` 并改用默认 `height: auto` 即可让容器随内容自然伸展，彻底解决视觉截断。
在您提供的 CodePen 示例中，.main 元素出现“滚动后背景消失、边框中断”的现象，根本原因并非 CSS 写法错误，而是对 height 属性行为的典型误用：height: 100% 是相对计算值，而非自适应声明。
? 问题本质解析
- height: 100% 要求父容器必须有明确的高度值（如 px、vh 或已计算出的固定高度），否则浏览器无法解析百分比基准，最终回退为 height: auto 的等效行为（但受布局上下文干扰，常表现为“撑不满”或“被截断”）。
- 您的 html, body 虽设置了 height: 100%，但默认情况下 和 的高度依赖于内容，且未显式约束为视口高度（如 min-height: 100vh），导致 .main 的 100% 实际指向一个不确定的、近乎为 0 的基准——此时 .main 高度被锁定在初始渲染高度，后续内容溢出时，overflow 行为仅作用于内容流，而 background-color 和 border 因容器“物理高度未增长”而无法延伸。
✅ 正确解法：用 height: auto 替代 height: 100%
.main {
width: 80rem;
min-width: 40rem;
/* 删除这一行 ? */
/* height: 100%; */
/* 保留其余样式不变 */
margin-left: auto;
margin-right: auto;
border-left: 3px solid hsl(0, 0%, 30%);
border-right: 3px solid hsl(0, 0%, 30%);
border-top: 3px solid hsl(0, 0%, 30%);
border-bottom: 0;
background-color: hsl(0, 0%, 0%);
line-height: 1.5;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
height: auto（CSS 默认值）会主动根据子元素内容高度动态伸缩，确保背景色、边框、阴影等装饰属性完整覆盖全部内容区域——无论用户滚动到哪一屏，视觉完整性始终得到保障。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
⚠️ 补充注意事项
-
不要依赖 bottom: 0 配合 height: 100% 实现“底部锚定”：该组合在非绝对定位上下文中无效，且易引发高度冲突。若需固定页脚布局，请改用 Flex 布局：
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; } .main { flex: 1; /* 自动填充剩余空间，同时保持内容自适应高度 */ } - box-sizing: border-box 已正确启用：您已在全局重置中声明，这能避免 padding/border 导致的宽度/高度意外溢出，是良好实践。
-
移动端兼容性提示：若未来需支持 iOS Safari 的平滑滚动，可在 .main 上追加：
.main { -webkit-overflow-scrolling: touch; /* 仅旧版 iOS 需要 */ overflow-y: auto; /* 确保滚动可用 */ }但当前场景无需此声明，因问题核心在于高度计算，而非滚动性能。
? 总结
height: 100% ≠ “填满内容”，而是“严格等于父高”；height: auto 才是内容驱动的高度真相。修复只需一行删减，却能根治背景裁剪、边框断裂、阴影缺失等连锁视觉故障——这是现代 CSS 布局中最基础也最关键的认知分水岭。
