设置overflow-y:auto不滚动的根本原因是容器缺乏有效高度：父容器未设高度、position:absolute脱离文档流或float导致高度塌陷；必须用明确值（如calc(100vh-60px)）设定height/max-height，并确保高度链完整传递。

直接给容器设 height 或 max-height，再配 overflow-y: auto，就能让内容在区域内滚动——但多数失败不是因为不会写这三行，而是没处理好高度上下文和布局脱离问题。

为什么设置了 overflow-y: auto 还不滚动？

最常见原因是容器没有「有效高度」：父元素没给高度、用了 position: absolute 脱离文档流、或内部用了 float 导致高度塌陷。

• height 必须是明确值（如 300px、calc(100vh - 60px)），不能依赖子内容撑开
• 若父容器是 position: absolute 或 flex 容器，子元素需显式声明 height: 100% 或 flex: 1 才能继承高度
• max-height 更安全：内容少时自动收缩，超限时才触发滚动，比固定 height 更符合“能小则小”的交互直觉

如何让导航栏固定、内容区独立滚动？

典型单页头部布局里，滚动条必须只出现在内容区，且不能盖住导航栏或导致其上移。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 全局重置：html, body { height: 100vh; margin: 0; padding: 0; }
• 导航栏用固定高度（如 50px），不设 overflow，也不参与滚动上下文
• 内容区用 height: calc(100vh - 50px) + overflow-y: auto，滚动条自然出现在该容器右侧边界
• 避免对 body 设 overflow: hidden —— 这会禁掉所有滚动，包括你刚配好的内容区

绝对定位弹窗里的内容怎么滚动？

弹窗（.card）用了 position: absolute，它的子元素默认拿不到高度上下文，overflow 就是摆设。

• 把弹窗本身设为 display: flex; flex-direction: column;
• 头部（.header）设固定高度，内容区（.content）用 flex: 1; overflow-y: auto;
• 别写 height: "100%" —— 引号是语法错误，CSS 中数值不加引号
• 如果内容区还嵌套了其他 position: absolute 元素，它们会脱离 flex 布局，得单独处理高度约束

真正卡住人的往往不是属性名记不住，而是高度计算链断在哪一层、flex 或 grid 是否意外创建了新的 BFC、以及移动端 vh 在地址栏收起/展开时的动态变化——这些细节不验证就上线，滚动行为会在不同机型上反复出岔子。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！