根本原因是html或body设为position: fixed/absolute会使其脱离文档流，导致无法参与高度计算、scrollheight坍缩、滚动上下文失效；修复关键是避免对根元素设position，改用子容器承载定位需求。
给 html 或 body 设置 position: fixed 或 position: absolute 会直接破坏页面滚动上下文——浏览器将不再把它们当作可滚动容器，而是当成脱离文档流的“画布”，导致整个页面无法自然滚动。
为什么position: fixed在html/body上等于禁用滚动
滚动行为依赖于「有内容高度、有溢出判定、参与文档流」的容器。html 和 body 是默认滚动根节点，但一旦被设为 position: fixed：
- 它立即脱离文档流，不参与高度计算，
body.scrollHeight会坍缩为视口高度（甚至更小） - 浏览器找不到有效的可滚动容器，
overflow: auto或scroll在它身上完全失效 - 即使手动加了
height: 2000px，这只是 CSS 声明，不产生真实内容高度，滚动机制无从触发 - 所有子元素（哪怕用了
position: relative）都失去父级高度锚点，进一步加剧布局断裂
position: absolute对body的影响更隐蔽
position: absolute 不像 fixed 那样强制绑定视口，但它仍会让 body 退出文档流高度计算链：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 若
body的父容器（即html）没设height或min-height，body渲染高度会退化为auto（通常只包住非绝对定位子元素） - 此时长内容不会撑开
body，scrollTop始终为 0，滚动条存在但不可拖动 - DevTools 中看到
body的Computed → height是一个很小的值（比如24px），而非预期的100vh或内容高度 - 修复不是给
body加min-height，而是根本避免对它设position—— 定位需求应下移到子容器
哪些看似安全的写法其实危险
这些写法在局部测试中可能“看起来正常”，但在跨设备、缩放、动态内容加载时极易暴露问题：
-
html { position: relative; }：虽不脱离流，但会干扰某些浏览器对根滚动容器的识别，Firefox 下可能使scrollbar-width失效 -
body { position: static !important; }：!important可能覆盖框架重置样式，但无法挽回已被破坏的层叠上下文 -
html, body { height: 100%; }+position: absolute：height: 100%依赖父级高度，而html的父级是视口，这种组合在 iOS Safari 键盘弹出时会导致高度抖动、滚动卡死 - 用
transform: translateZ(0)触发硬件加速的同时加position: fixed：两者叠加会强化层叠上下文隔离，让滚动判定逻辑更不可预测
真正安全的定位起点永远是某个明确高度的子容器（如 .main-wrapper），而不是 html 或 body。一旦你开始思考“要不要给根元素加 position”，就该立刻停下来检查布局结构是否已偏离流式基础——这不是样式微调，而是骨架错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
