Bootstrap如何实现响应式的垂直滚动列表并支持动态调整高度

滚动容器必须设max-height，不能只靠overflow-y:auto；因Bootstrap不自动设高度，overflow-y仅在内容溢出已有高度时生效，常见错误是未设max-height、用h-75类受flex干扰或写死px值，推荐calc(100vh-220px)并加安全边距和媒体查询适配。

滚动容器必须设 max-height，不能只靠 overflow-y: auto

加了 overflow-y: auto 却不滚动？大概率是容器没高度上限。Bootstrap 不会自动给元素设高度，overflow-y 只在内容溢出 *已有高度* 时才生效。

常见错误：

• 直接写 <div class="overflow-y-auto"> —— 没 max-height，等于没写

• 用 h-75 这类工具类 —— 在 flex 容器里常被父级 padding 干扰，实际高度偏差可达 30px

• 写死 max-height: 400px —— 小屏上太高，桌面又不够，留白或截断

1. 推荐写法：style="max-height: calc(100vh - 220px);"（减去 header/nav/fixed 元素总高）
2. 小屏单独调：加 @media (max-width: 576px) { max-height: calc(100vh - 160px); }
3. 若在 .modal-body 里，直接内联：style="max-height: 70vh; overflow-y: auto;"，别动 .modal-dialog

动态调整高度时，calc() 值要防视口变化抖动

用户切横屏、缩放页面、唤起软键盘后，100vh 会变（尤其 iOS Safari），导致滚动区突然跳高或消失。这不是 bug，是浏览器对视口单位的重新计算。

容易踩的坑：

• 用 vh 单位但没预留安全边距

• 没监听 resize 或 orientationchange 事件做补偿

• 在 modal 或 offcanvas 里用 100vh，结果被遮罩层挤压

1. 加安全余量：比如 calc(100vh - 220px) 改成 calc(100vh - 220px - env(safe-area-inset-bottom))
2. 避免在 position: fixed 父容器里嵌套滚动区 —— 固定定位会干扰 vh 计算
3. 测试重点机型：iPhone SE（小屏+高 DPR），它的 calc() 偏差最明显

外层容器必须加 position: relative 和 z-index 才能显示阴影

给滚动区本身加 shadow-sm，阴影大概率看不见——不是类没生效，是 overflow-y: auto 触发裁剪边界，把阴影挡在可视区外。

真正起效的结构只有两种：

• 外层负责阴影与定位（position: relative + z-index: 1）

• 内层负责滚动与高度控制（overflow-y: auto + max-height）

1. 别用 shadow-none 覆盖后忘了重加 —— 调试时最常漏这一步
2. 如果外层有兄弟元素（比如另一个卡片），没设 z-index 会导致阴影被遮盖
3. 深色模式下，默认 shadow-sm 的 rgba(0,0,0,.075) 几乎不可见，需媒体查询覆盖

列表内容含表格或长文本时，要额外防横向溢出

滚动区设了 overflow-y: auto，却意外出现横向滚动条？通常是子元素撑宽了容器，尤其是 <table> 或未换行的长链接/代码块。

关键不是“隐藏横向滚动”，而是从源头防止溢出：

• 表格类内容必须设 table-layout: fixed + word-break: break-word

• 滚动区内所有文本容器加 min-width: 0（阻止 flex 子项强制撑宽）

• 避免给 col-auto 加 white-space: nowrap —— 小屏会横向溢出

1. 表格列宽用 width: 0 + min-width 控制，别依赖内容自动伸缩
2. 长 URL 或路径建议用 <span class="text-break"> 包裹
3. 移动端 Safari 对 overflow-y: scroll 有渲染延迟，旧版需补 -webkit-overflow-scrolling: touch

滚动区高度动态适配的难点不在 CSS 写法，而在视口变化时的边界条件处理 —— 尤其是 iOS 软键盘唤起、横竖屏切换、缩放操作这三类场景，calc(100vh - X) 很容易失效，得靠 env(safe-area-inset-*) 和 JS 补偿双保险。