推荐用 Flexbox 实现页脚沉底：给 body 或 .layui-layout 设置 display: flex; flex-direction: column; min-height: 100vh；主体容器设 flex: 1；footer 保持文档流即可自动到底部。
用 Layui 实现页脚固定在页面底部、又不遮挡主体内容，关键不是靠 position: fixed 硬贴底，而是让布局逻辑把页脚“推到底部”。Layui 本身不提供专用的页脚粘性组件，但完全兼容现代 CSS 布局方案，推荐直接使用 Flexbox —— 简洁、可靠、无需 JS、适配 Layui 的 HTML 结构。
用 Flexbox 让 footer 自动沉底（最推荐）
这是目前最稳妥的方式，和 Layui 的 或外层容器配合良好：
- 给
body（或 Layui 常用的包裹容器，如<div class="layui-layout layui-layout-admin">）添加：<br><code>display: flex; flex-direction: column; min-height: 100vh; - 把主要内容区域（比如
<div class="layui-body"> 或 <code><main></main>）设为：flex: 1;—— 它会自动撑开剩余空间，把 footer “顶”到最下方 - footer 保持默认文档流位置，不加
position: fixed/absolute，也不需要额外定位 - 给主体内容容器（如
<div class="layui-body">）设置：<br><code>margin-bottom: 60px;（值 = fixed 元素高度） - 更灵活的做法：用 CSS 变量统一管理高度
:root { --footer-height: 60px; }.layui-body { margin-bottom: var(--footer-height); } - 避免写
body { padding-bottom: 60px; }—— 容易干扰滚动检测、IntersectionObserver 等行为 - 若已用
position: fixed固定了 header 或 sidebar，需给.layui-body预留对应顶部/左侧空间（如padding-top: 64px;），否则内容会被遮盖 - footer 若放在
.layui-layout外部（常见于独立引入），建议将其移入 layout 内部，作为直接子元素，确保 Flex/Grid 布局能正确包含它 - 移动端 Safari 中，fixed 元素可能因地址栏收起而错位，可加：
.layui-footer { padding-bottom: env(safe-area-inset-bottom); } -
position: absolute; bottom: 0;+body { position: relative; }：Layui 的某些 JS 组件（如弹层、侧边栏展开）可能动态修改 body 样式，导致定位参考丢失 - 负 margin 技术（如
section { padding-bottom: 60px; }+footer { margin-top: -60px; }）：与 Layui 的栅格、卡片等内边距规则易冲突，调试困难 - JS 动态计算高度并设置
min-height：多余，现代浏览器原生支持 flex/gird，且 Layui 本身不依赖运行时高度干预
如果必须用 fixed 底部栏（如 Layui 的 tab 切换栏或自定义导航）
这类场景下，fixed 是为了交互体验，但必须主动避让内容：
适配 Layui 常见结构的实操要点
Layui 默认的 admin 模板含 header + sidebar + body + footer，注意：
不推荐的旧方法（Layui 项目中容易出问题）
这些方式在 Layui 场景下兼容性差、维护成本高：
