右侧主体内容溢出无法滚动，本质是滚动能力被样式或结构拦截：需确保主体容器有明确高度和overflow-y: auto，排查父级overflow:hidden干扰，避免内联样式冲突，并动态适配高度。
右侧主体内容溢出却无法滚动，本质不是内容“没出来”，而是滚动能力被样式或结构拦截了。Layui 后台常见布局（如 admin.js + layout 布局）中，主体区域（如 .layui-body 或自定义的 main 内容区）一旦高度固定但未正确启用滚动，就会出现内容被裁切、鼠标滚轮无响应、拖拽滚动条无效等问题。
检查主体容器是否具备可滚动条件
滚动行为由 CSS 的 overflow 和尺寸约束共同决定，缺一不可：
- 确保主体容器（如
.layui-body）设置了明确的高度，例如height: calc(100vh - 60px)或min-height: calc(100vh - 60px)，避免高度塌陷 - 必须设置
overflow-y: auto（推荐）或overflow: auto；仅设overflow-x: hidden会禁用垂直滚动 - 若使用
flex布局（如.layui-layout-left + .layui-body为 flex 项目），需确认父容器（.layui-layout-body）已设display: flex; flex-direction: column;，且主体项有flex: 1占满剩余空间
排查父级容器的 overflow 干扰
很多情况下，滚动失效是因为外层容器提前截断了渲染流：
- 检查
.layui-layout-admin、.layui-layout-body或你自定义的 wrapper 是否写了overflow: hidden—— 这会直接屏蔽子元素的滚动区域 - 如果用了
layui-card、layui-tab-item或layui-collapse包裹主体内容，它们默认带overflow: hidden，需显式覆盖：.layui-card .layui-card-body { overflow-y: auto !important; } - 避免在主体区域上写内联
style="height: 500px;"，它可能与 JS 动态计算高度冲突；优先用 CSS 类控制
修复固定布局下的滚动穿透与错位
当主体含 Layui 表格、弹窗或 iframe 等组件时，滚动常被二次拦截：
- 表格开启
height参数（如height: 400）后，其内部.layui-table-box已接管垂直滚动，此时主体容器无需再设overflow，否则会出现双滚动条或卡顿 - 若主体内嵌
layer.open({ type: 2 })，iframe 页面自身需有足够高度（如body { min-height: 100vh; }）并设overflow-y: auto，否则外层容器滚动无效 - 移动端需加
-webkit-overflow-scrolling: touch提升滑动流畅度，尤其在 iOS Safari 中
动态适配高度避免硬编码
固定像素高度在不同屏幕下易导致滚动失效或空白，建议用 JS 动态计算：
- 在页面就绪后执行：
$('.layui-body').css('min-height', $(window).height() - $('.layui-header').outerHeight() - $('.layui-footer').outerHeight() + 'px'); - 监听窗口变化：
$(window).on('resize', function() { /* 重新计算并设置高度 */ }); - 若使用
flex布局，更推荐纯 CSS 解法：.layui-body { flex: 1; overflow-y: auto; }，配合父级display: flex，无需 JS
