使用 css flexbox 实现 sticky footer 的核心做法是将页面根容器设为 flex 布局，并指定主轴方向为垂直（column），然后让内容区域占据剩余空间。具体操作是给包裹整个页面的外层元素设置 display: flex; flex-direction: column;，并将内部的内容容器设置为 flex: 1;。这样即使内容不足一屏，底部也会紧贴视口下方；若内容超出，则正常滚动。
Flex 容器与子项的布局关系是怎样的
在 Flexbox 模型中，父容器通过 flex-direction: column; 将子元素沿垂直轴排列。此时，主轴是 Y 轴，交叉轴是 X 轴。当给内容区设置 flex: 1; 时，实际上是设置了 flex-grow: 1;，这意味着该子项会吸收父容器中所有未被其他子项占用的剩余空间。页脚作为最后一个子项，其高度由自身内容决定，不会挤压内容区，也不会被内容区挤压，从而实现了“贴底”效果。
html {
height: 100%;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.main-content {
flex: 1;
}
.footer {
background: #333;
color: white;
padding: 1rem;
}
上述代码中，html 和 body 的高度设定确保了容器能撑满视口。.main-content 类应用了 flex: 1;，这是实现贴底的关键。当浏览器窗口高度小于内容高度时，min-height: 100vh; 保证 body 至少占满一屏，而 flex: 1; 会在内容较少时自动扩展以填充空白。
立即学习“前端免费学习笔记（深入）”；
如果内容溢出屏幕，布局会发生什么变化
当页面内容高度超过视口高度时，Flexbox 的默认行为是允许子项溢出或导致容器滚动。由于 body 设置了 min-height: 100vh; 而非固定 height: 100vh;，容器可以自然扩展。此时，.main-content 中的 flex: 1; 依然生效，但它只会扩展到填满初始视口高度，多余的内容会推动 .footer 向下移动，形成正常的文档流滚动效果。页脚始终位于内容的末尾，而不是固定在屏幕底部（那是 position: fixed 的效果）。
/* 验证内容溢出的情况 */
.main-content {
flex: 1;
/* 假设这里有大量文本 */
padding: 20px;
}
/* 控制台输出检查 */
console.log(getComputedStyle(document.body).display); // 'flex'
console.log(getComputedStyle(document.querySelector('.main-content')).flexGrow); // 1
通过检查计算样式，可以确认 body 确实处于 flex 模式，且内容区的 flexGrow 值为 1。这种机制确保了在不同屏幕尺寸和内容长度下，页脚都能保持正确的逻辑位置：内容少时贴底，内容多时随动。无需 JavaScript 介入，纯 CSS 即可稳定实现。
基于 .main-content 的 flex-grow 属性对页脚定位的具体影响是什么
.main-content 的 flex-grow: 1; 属性直接决定了页脚是否“贴底”。如果移除该属性，.main-content 将仅根据其内容高度渲染，若内容不足一屏，页脚上方会出现大片空白。设置 flex: 1; 后，该区域强制拉伸至填满剩余垂直空间，迫使 .footer 移动到视口底部。这一属性是连接“内容自适应”与“页脚贴底”的桥梁，它不改变页脚自身的样式，只改变其在 Flex 容器中的相对位置分配。
