当为 .main 容器设置 height: 100% 时，其高度被强制限制为父容器（即视口）高度，导致长内容溢出后背景色与边框“消失”——实际是容器未随内容伸展所致；移除该声明并让高度由内容自然撑开即可彻底解决。
当为 `.main` 容器设置 `height: 100%` 时，其高度被强制限制为父容器（即视口）高度，导致长内容溢出后背景色与边框“消失”——实际是容器未随内容伸展所致；移除该声明并让高度由内容自然撑开即可彻底解决。
这个问题本质是 CSS 高度计算逻辑的典型误区：height: 100% 并非“适应内容”，而是严格继承父元素的计算高度。在你的代码中，.main 的父元素是 <body>，而 <body> 被设为 height: 100%（继承自 <html>），最终受限于视口高度（viewport height）。因此，无论 .main 内容多长，它都被“钉死”在初始视口高内——滚动时，超出部分虽可见文字（因文本流默认溢出可见），但背景色、边框、阴影等属于 .main 元素自身的视觉样式，不会延伸到被裁剪区域之外。
✅ 正确解法：移除 .main 中的 height: 100% 和 bottom: 0px（后者在非定位上下文中无效且易引发误解），改用默认的 height: auto：
.main {
width: 80rem;
min-width: 40rem;
/* ✅ 删除 height: 100% 和 bottom: 0px */
margin-left: auto;
margin-right: auto;
border: 3px solid hsl(0, 0%, 30%);
border-bottom: none; /* 保持原意：无底边框 */
background-color: hsl(0, 0%, 0%);
line-height: 1.5;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}⚠️ 注意事项：
- bottom: 0px 在 .main 未设置 position: absolute/fixed/relative 时完全无效，属于冗余代码，建议删除以避免后续维护混淆；
- 确保 <html> 和 <body> 不意外截断子元素高度：你当前已设 height: 100%，虽不影响 .main 自适应（因 auto 优先级更高），但为保险起见，可显式重置 min-height: 100vh（仅对根容器）：
html { min-height: 100vh; /* 替代 height: 100% 更健壮 */ } body { min-height: 100vh; /* 确保 body 至少撑满视口，但允许内容扩展 */ } - 若需页脚始终贴底或实现“最小全屏+内容延展”布局，推荐使用 Flexbox 或 Grid 布局（如 body { display: flex; flex-direction: column; min-height: 100vh; } + .main { flex: 1; }），而非依赖 height: 100%。
总结：CSS 中 height: auto 是内容驱动的高度行为，而 height: 100% 是上下文驱动的约束行为。面对动态长度的内容区块（如博客正文、日志列表），永远优先信任 auto —— 让文档流自然决定尺寸，才是语义清晰、响应可靠、易于维护的现代实践。
