双滚动条最常见原因是body高度失控叠加子容器可滚动：如header+100vh+footer＞100vh触发body外层滚动，同时.container设overflow-y:auto又产生内层滚动。
body 和子容器同时溢出导致双滚动条
最常见原因是 body 高度失控，叠加内部容器又设置了可滚动区域。比如：body 默认是 display: block，若子元素（如 .container）用了 height: 100vh，但页面顶部还有 <header></header>、底部有 <footer></footer>，实际总高度就变成 header高度 + 100vh + footer高度 > 100vh —— 这时 body 自动产生外层滚动条；而如果 .container 又设了 overflow-y: auto，内部再套列表，就会出现第二个滚动条。
fixed/absolute 元素脱离文档流引发高度塌陷
当 position: fixed 或 position: absolute 的导航栏、弹窗等未被父容器“预留空间”，父容器会按无内容计算高度，后续内容强行撑开父容器，造成局部溢出。典型表现是：滚动到页面底部时，发现底部内容被截断，同时右侧出现两个滚动条——一个属于 body，一个属于某个 div 内部的 overflow-y: scroll 区域。
Flex/Grid 容器未正确约束子项高度
使用 display: flex 时，若父容器没设 height 或 min-height，且子项用了 flex: 1，浏览器可能无法准确推导可用空间，导致子项高度超出预期。尤其在移动端 Safari 中，100vh 会包含地址栏高度（即使已收起），而 100dvh 才代表真实可视高度。不加区分地用 100vh 套嵌多层，极易让某一层悄悄溢出。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
Vant/Element Plus 等 UI 库组件占位方式影响布局流
像 <van-nav-bar> 或 <el-header> 如果启用了 placeholder 属性或自带固定高度样式，它们会真实占据文档流空间。若你在同一级布局中又给 <router-view> 设置 height: 100vh，等于把三段高度（header + 100vh + footer）全塞进一个 100vh 的视口里。此时外层容器必然溢出，双滚动条就是结果。
立即学习“前端免费学习笔记（深入）”；
