侧边栏 overflow-y: auto 不出现滚动条，最常见原因是高度继承链断裂：.left-section 的 height: 100% 继承的是被 header 压缩后的剩余高度而非视口全高；须三层锚定——html, body { height: 100dvh; }、body { display: flex; flex-direction: column; }、.container { flex: 1; overflow: hidden; }，缺一不可。
侧边栏 overflow-y: auto 但滚动条不出现？检查高度继承链是否断裂
最常见原因是 .left-section 的 height: 100% 没有真正拿到父容器的全高——它继承的是被 header 压缩后的剩余高度，而不是视口高度。浏览器不会自动把“百分比高度”和“视口”对齐，必须显式锚定。
正确做法是三层锚定：
-
html, body { height: 100dvh; }（用dvh而非vh，避免 iOS Safari 地址栏遮挡） -
body { display: flex; flex-direction: column; }，让header和主容器成为弹性子项 -
.container { flex: 1; overflow: hidden; }，强制撑满剩余空间 -
.left-section { height: 100%; overflow-y: auto; }才能真正滚动到底
漏掉任意一层，overflow-y: auto 就只是摆设。
fixed 侧边栏内部滚动卡顿或触发页面抖动？别直接套 overflow
给 position: fixed 的侧边栏加 overflow-y: auto 很危险：Safari 在 fixed 元素内滚动时容易引发整页抖动，尤其在 iOS 上。
稳妥方案是：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 先设固定高度：
height: calc(100vh - 64px);（减去 header 高度，数值按实际调整） - 再加滚动支持：
overflow-y: auto; -webkit-overflow-scrolling: touch; - 避免在侧边栏里放
<iframe></iframe>、<video></video>或大量图片——这些资源会放大渲染压力 - 真机测试滚动行为，模拟器常掩盖 Safari 的实际问题
flex 布局下侧边栏滚动区域只覆盖部分高度？别信 height: 100%
在 display: flex 容器中，height: 100% 不会自动继承父容器的计算后高度，而是依赖父元素是否设置了明确高度。如果父容器是 flex: 1 但没设 min-height 或 height，子元素的百分比高度就失效。
实操建议：
- 侧边栏自身用
flex: 0 0 240px;（不伸缩、不收缩、基础宽度固定） - 它的直接父容器（比如
.sidebar-wrapper）必须设height: 100%;且该父容器本身已通过flex: 1或height: 100dvh锚定高度 - 滚动容器内不要用
padding-top或padding-bottom撑开空间——改用子元素的margin或额外<div> 占位，否则 padding 会被算进滚动范围，导致内容截断<h3>点击侧边栏菜单无响应？z-index 和 position 冲突比你想的更常见</h3> <p>不是 JS 没绑定，也不是 CSS 写错了，而是侧边栏被其他元素盖住了。轮播图、弹窗、广告位常设 <code>z-index: 9999，而侧边栏只写了z-index: 10，结果点击穿透到下层。排查步骤：
- 打开开发者工具，选中侧边栏元素，看 “Computed” 面板里的
z-index和position是否生效 - 确认侧边栏的
position是fixed或absolute，static元素的z-index无效 - 检查是否有父容器触发了新层叠上下文（比如加了
transform或will-change），这会让子元素的z-index相对父容器生效，而非全局 - 移动端尤其要注意：某些 UI 库默认给
body加transform: translateZ(0)，会悄悄创建层叠上下文
复杂点在于，z-index 生效与否不只看数字大小，还取决于层叠上下文的嵌套层级——这点最容易被忽略。
- 打开开发者工具，选中侧边栏元素，看 “Computed” 面板里的
