layui表格分页条固定在视口底部需用position:fixed覆盖默认定位，并为.layui-table-box设置margin-bottom预留高度；或禁用内置分页，用laypage独立渲染并挂载到fixed容器中。
用 CSS fixed 定位强行固定分页条
layui 表格自带的分页栏（.layui-table-page）默认渲染在表格容器底部，但它是相对定位、随内容滚动的。要让它“钉”在视口最下方，必须用 position: fixed 覆盖默认行为。
直接加样式即可生效，无需改 JS 配置：
.layui-table-page {
position: fixed !important;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
border-top: 1px solid #e6e6e6;
z-index: 1000;
}
.layui-table-box {
margin-bottom: 42px; /* 预留分页条高度，避免被遮挡 */
}- 必须加
!important，否则 layui 内联样式会覆盖 -
margin-bottom加在.layui-table-box上，不是表格容器本身——这是表格内容区的包裹容器，改它才不影响表头冻结等逻辑 - 如果页面有 footer 或其他底部元素，需调高
z-index避免被盖住
禁用内置分页后用 laypage 单独渲染并 fixed
如果你已经按规范拆分了分页逻辑（即 table.render 中设 page: false，再用 laypage.render 独立控制），那固定位置就更灵活：直接把 laypage 的 elem 挂到一个固定定位的 DOM 节点里。
例如：
<div id="fixed-page" style="position:fixed;bottom:0;left:0;right:0;background:#fff;z-index:1000;"></div>
然后在 laypage.render 中指定：
laypage.render({
elem: 'fixed-page',
count: 100,
jump: function(obj){
table.reload('demo', {
page: { curr: obj.curr, limit: obj.limit }
});
}
});- 这样分页 DOM 完全脱离表格结构，
fixed不会受表格高度或滚动影响 - 注意：此时
table.reload必须传完整page对象，不能只传curr - 如果页面有多个表格共用同一分页容器，需确保
jump里 reload 的表格 ID 准确，避免误刷
滚动时分页条抖动或错位？检查这几个地方
fixed 分页常见视觉异常，往往不是定位本身的问题，而是布局干扰：
-
.layui-table-box的margin-bottom没设，或值太小 → 表格最后一行被分页条盖住 - 表格容器父级有
overflow: hidden→ fixed 元素被裁剪，尤其在移动端 - 页面用了
transform（比如某些动画库或 flex 布局 hack）→ 会创建新的 containing block，fixed 失效，变成相对该容器定位 - 分页条高度动态变化（比如切换
limits下拉时）→ 导致margin-bottom不匹配，需监听下拉展开事件手动重设
为什么不用 table 自带的 page 配置做 fixed？
因为 table.render 的 page 配置不提供挂载点控制，它的分页 DOM 是硬编码插入到 .layui-table-box 内部末尾的，你无法用 CSS 把它“提出来”再 fixed——position: fixed 对内部子元素生效，但它的定位参考系仍是整个视口，而 DOM 层级卡在表格里会导致事件冒泡、z-index 层叠、滚动穿透等一连串问题。
真正干净的做法只有两个：要么用 CSS 强制 fixed 并兜底处理边距和裁剪，要么彻底拆分，让分页和表格解耦。后者在需要顶部/侧边分页、多表格复用、或服务端分页 count 动态更新的场景里，几乎不可避免。
