使用Flexbox实现固定底部栏最稳妥，通过设置容器min-height:100vh和flex:1使主内容占剩余空间，将footer推至底部，适用于内容较少或较多的场景。
在网页开发中，固定底部栏（Fixed Footer）是一种常见布局需求。当页面内容较少时，底部栏应固定在视窗底部；当内容较多时，底部栏应在所有内容之后显示。实现这种效果的关键是合理使用CSS的布局方式。
1. 使用Flexbox实现粘性底部布局
Flexbox是最常用且兼容性良好的方案之一，适合现代浏览器。
基本结构如下：
<div class="container"><header>头部</header>
<main class="flex-grow">主体内容</main>
<footer>底部栏</footer>
</div>
CSS样式设置：
立即学习“前端免费学习笔记（深入）”；
.container {display: flex;
flex-direction: column;
min-height: 100vh;
} main {
flex: 1;
} footer {
height: 60px;
background: #333;
color: white;
text-align: center;
line-height: 60px;
}
说明：容器最小高度为视窗高度，主内容区域通过 flex: 1 占据剩余空间，从而将footer“推”到可视区域底部或文档末尾。
2. 使用Grid布局实现
CSS Grid提供更直观的分层控制。
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
} header { grid-row: 1; }
main { grid-row: 2; }
footer { grid-row: 3; }
grid-template-rows 中的 1fr 表示中间区域占满可用空间，上下部分自动适应内容高度。
3. 避免常见错误
以下做法可能导致布局异常：
- 忘记设置容器 min-height: 100vh，导致无法撑满屏幕
- 对 body 或 html 元素未重置默认 margin，造成滚动条误判
- 使用绝对定位 + bottom 而不处理内容遮挡问题
建议始终添加基础重置：
html, body {margin: 0;
padding: 0;
height: 100%;
}
4. 实际应用场景建议
适用于登录页、单页应用、管理后台等需要视觉完整性的场景。
移动端适配注意点：
- iOS Safari中 vh 值可能受地址栏影响，可考虑使用 JS 动态计算或配合 viewport 单位
- 避免footer遮挡输入框，必要时监听键盘弹出调整布局
基本上就这些。用Flexbox方案最稳妥，代码简洁且维护性强。关键是理解“剩余空间分配”的逻辑，而不是强行定位。
