最简洁可靠的方式是使用 flex-direction: column 配合 margin-top: auto 作用于页脚元素；需设置 html, body { height: 100%; margin: 0; }，.layout { display: flex; flex-direction: column; min-height: 100vh; }，footer { margin-top: auto; }。
用 Flex 布局实现底部固定（即页脚始终贴底，内容区自适应撑满剩余高度），最简洁可靠的方式是使用 flex-direction: column 配合 margin-top: auto 作用于页脚元素。
结构前提：确保父容器高度占满视口
Flex 布局要起作用，必须让根容器（通常是 body 或某个包裹容器）具备明确的高度基准：
- 设置
html, body { height: 100%; margin: 0; } - 包裹主内容的容器（如
.layout）设为display: flex; flex-direction: column; min-height: 100vh; - 用
min-height: 100vh而非height: 100vh，避免内容超长时页脚被截断
关键一步：给页脚加 margin-top: auto
在 column 方向的 flex 容器中，margin-top: auto 会把页脚“推”到容器底部，且不占用额外空间，也不影响其他元素的自然流式布局：
- 页脚元素（如
footer）无需设position: absolute或flex: 0 0 auto - 只要它在 flex 容器内、且不是第一个子元素，
margin-top: auto就能生效 - 即使中间内容很少，页脚也会紧贴视口底边；内容变多时，页脚自动下移，不遮挡内容
典型 HTML 结构与 CSS 示例
HTML：
立即学习“前端免费学习笔记（深入）”；
<div class="layout"> <header>顶部</header> <main>主要内容区域</main> <footer>底部固定</footer> </div>
CSS：
html, body {
height: 100%;
margin: 0;
}
.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1; /* 可选：让 main 占满剩余空间（尤其当有多个可伸缩区域时） */
}
footer {
margin-top: auto;
}注意事项与常见问题
这个方案轻量、语义清晰，但需注意几个细节：
- 如果
header或footer有固定高度，建议显式设置（如height: 60px），避免 flex 计算偏差 - 不要给
footer同时设margin-top: auto和margin-bottom，后者可能干扰对齐 - 若页脚内部需要居中或内边距，直接在
footer上设置padding即可，不影响定位逻辑 - 旧版 Safari 对
margin: auto在 flex column 中的支持略弱，可加align-self: flex-end作后备（但现代项目基本无需）
