如何使用CSS Flexbox实现页面粘性页脚效果？

用Flexbox实现「内容不足时页脚贴在视口底部、内容超过一屏时页脚随内容落在页面最末尾」的效果，不需要绝对定位、负边距这类容易出兼容问题的hack写法，仅需3段核心样式即可完成。

核心实现代码 #

• 第一步：重置浏览器默认边距，避免原生默认样式干扰布局

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

• 第二步：给页面最外层容器（直接用body标签即可，也可替换为自定义全局包裹容器）设置纵向弹性布局，强制容器最小高度占满整个视口

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

• 第三步：给页眉、页脚之间的主内容区设置弹性填充规则，让内容区自动占据除页眉、页脚外的所有剩余空间

/* 把选择器替换为你项目中实际使用的内容区选择器即可 */
.main {
  flex: 1;
}

完成以上设置后，页脚不需要添加任何特殊定位属性，会自动被推到页面最底部，不会出现内容不足时悬浮在页面中部的问题。

效果对比 #

• 错误实现效果：内容不足时页脚悬浮在页面中部
  
• 正确实现效果：页脚始终固定在对应位置
  

该方案兼容所有现代浏览器，不会出现绝对定位方案中内容被页脚遮挡、需要手动预留和页脚高度一致的内边距的问题，是目前实现粘性页脚最简洁的方案。

内容的提问来源于stack exchange，提问作者Joshua