layui表格高度配置必须用"full-n"格式而非"auto",推荐结合maxheight防溢出,并手动监听resize和fullscreenchange事件调用tableins.resize()。

height 配置必须用 "full-N",不能写 "auto"
传 "auto" 会被 Layui 完全忽略,回退到约 300px 的默认高度,滚动条出不来、内容被截断都是这个原因。真正起效的自适应写法是字符串 "full-110" 这类格式,其中 110 表示从视口高度中减去的像素值——通常是顶部导航栏、搜索区、分页栏等固定区块的总高。
常见错误是凭感觉填 "full-100",但页面结构一变(比如加了折叠面板或多行筛选),这个值就偏了:要么底部大片留白,要么表格撑破容器。推荐先用浏览器开发者工具量出真实占用高度,再填入;若顶部区域高度不固定(如侧边栏可收起),就得换函数式写法。
必须手动监听 window.resize 并调 tableIns.resize()
Layui 不会自动响应窗口尺寸变化。光设 height: "full-110" 或 height: function(){} 是不够的,漏掉这步,用户拖拽浏览器边框后,表格高度完全不会更新。
- 渲染时必须保存实例:
var tableIns = table.render({ ... }) - 绑定 resize 事件:
$(window).on('resize', function(){ tableIns.resize() }) - 如果表格在 iframe 或 layui-layer 弹窗里,监听对象得换成
$(parent.window),否则事件根本不会触发 - 2.9.1+ 版本才完整支持函数式
height的动态响应;旧版本需在resize回调里手动table.reload()并传新高度
全屏模式下要额外监听 fullscreenchange
用户按 F11 进入全屏或退出时,window.resize 有时不触发,或者触发太早导致 DOM 尚未重排,tableIns.resize() 算出的高度不准。
正确做法是同时监听 fullscreenchange 事件,并在回调里用 setTimeout(..., 16) 延迟一帧再调 tableIns.resize(),确保浏览器完成重绘后再计算高度。
maxHeight 比 height 更适合防失控
当关闭分页(page: false)且数据量不可控时,仅靠 height 容易撑爆页面。此时应优先用 maxHeight ——它允许表格随内容自然增高,但上限可控,超出即出现内部滚动条,不影响整体布局。
maxHeight 和 height 可共存,例如 height: "full-110", maxHeight: 600,既适配视口又兜底防溢出。注意:该参数从 2.8 版本起正式支持,文档位于 docs/table/detail/options.md 第 216–224 行。
函数式 height 里别硬写 $(window).height() - 120 这种魔法数字,要真去取 $('#search-bar').outerHeight();table.resize() 不改变配置本身,只重绘,所以高度逻辑错位时,reload 才是更稳妥的选择。











