通过设置 body { overflow: auto } 并移除子容器的 overflow-y: scroll，可将滚动行为交由浏览器窗口接管，避免在页面中部出现孤立的滚动条。
通过设置 `body { overflow: auto }` 并移除子容器的 `overflow-y: scroll`，可将滚动行为交由浏览器窗口接管，避免在页面中部出现孤立的滚动条。
在 Web 开发中，当页面内容超出视口高度时，我们常希望整个页面自然滚动，而非某个内部容器（如 #content-box）单独滚动——尤其当该容器宽度受限、居中显示时（例如 margin: 0 auto），其自带的垂直滚动条会出现在页面中央，破坏视觉一致性与用户体验。
根本原因在于：当前样式中 #content-box 显式设置了 overflow-y: scroll，强制它自身处理溢出内容；而 body 默认为 overflow: visible（实际渲染中等效于 auto，但受盒模型和布局影响常被抑制），导致滚动能力被“截留”在局部。
✅ 正确解法非常简洁：
小红书长文-谷歌浏览器
下载
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
/* 启用 body 的滚动能力 */
body {
overflow-y: auto;
margin: 0; /* 推荐重置，默认 margin 可能引发意外空白 */
}
/* 移除原 content-box 的滚动控制 */
#content-box {
overflow-y: visible; /* 或直接删除该声明 */
margin: 0 auto; /* 保持居中，但不再限制高度 */
}
/* 确保内容可自然撑开 body */
.container {
display: flex;
flex-direction: column; /* 更符合语义：header + content 垂直流 */
min-height: 100vh; /* 使用 min-height 替代 max-height，允许内容扩展 */
}同时，建议在 HTML 中移除 #content-box 的 tabindex="0" —— 它原本用于使 div 可聚焦以支持键盘滚动，但在滚动移交至 body 后已无必要，反而可能干扰辅助技术或焦点管理。
? 注意事项：
- 若页面存在固定定位（position: fixed）的头部/侧边栏，需确保它们不遮挡滚动内容，必要时为 body 添加 padding-top 或使用 scroll-padding-top；
- 在移动端，body 滚动有时受 -webkit-overflow-scrolling: touch 影响，现代项目中通常无需额外设置（iOS 13+ 已默认启用平滑滚动）；
- 避免对 html 或 body 设置 height: 100%，这可能压缩文档流高度，导致滚动失效。
最终效果：滚动条回归浏览器右侧边缘，内容随窗口自然流动，布局更专业、交互更符合用户预期。
