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 —— 小屏上太高，桌面又不够，留白或截断
- 推荐写法：
style="max-height: calc(100vh - 220px);"（减去 header/nav/fixed 元素总高） - 小屏单独调：加
@media (max-width: 576px) { max-height: calc(100vh - 160px); } - 若在
.modal-body里，直接内联：style="max-height: 70vh; overflow-y: auto;"，别动.modal-dialog
动态调整高度时，calc() 值要防视口变化抖动
用户切横屏、缩放页面、唤起软键盘后，100vh 会变（尤其 iOS Safari），导致滚动区突然跳高或消失。这不是 bug，是浏览器对视口单位的重新计算。
容易踩的坑：
• 用 vh 单位但没预留安全边距
• 没监听 resize 或 orientationchange 事件做补偿
• 在 modal 或 offcanvas 里用 100vh，结果被遮罩层挤压
- 加安全余量：比如
calc(100vh - 220px)改成calc(100vh - 220px - env(safe-area-inset-bottom)) - 避免在
position: fixed父容器里嵌套滚动区 —— 固定定位会干扰vh计算 - 测试重点机型：iPhone SE（小屏+高 DPR），它的
calc()偏差最明显
外层容器必须加 position: relative 和 z-index 才能显示阴影
给滚动区本身加 shadow-sm，阴影大概率看不见——不是类没生效，是 overflow-y: auto 触发裁剪边界，把阴影挡在可视区外。
真正起效的结构只有两种：
• 外层负责阴影与定位（position: relative + z-index: 1）
• 内层负责滚动与高度控制（overflow-y: auto + max-height）
- 别用
shadow-none覆盖后忘了重加 —— 调试时最常漏这一步 - 如果外层有兄弟元素（比如另一个卡片），没设
z-index会导致阴影被遮盖 - 深色模式下，默认
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 —— 小屏会横向溢出
- 表格列宽用
width: 0+min-width控制，别依赖内容自动伸缩 - 长 URL 或路径建议用
<span class="text-break">包裹 - 移动端 Safari 对
overflow-y: scroll有渲染延迟，旧版需补-webkit-overflow-scrolling: touch
滚动区高度动态适配的难点不在 CSS 写法，而在视口变化时的边界条件处理 —— 尤其是 iOS 软键盘唤起、横竖屏切换、缩放操作这三类场景，calc(100vh - X) 很容易失效，得靠 env(safe-area-inset-*) 和 JS 补偿双保险。
