使用Flexbox布局时Footer未底部对齐，求问题原因

这个问题我之前也碰到过，核心原因是你的flex容器（也就是body）没有撑满整个视口高度～

问题根源 #

你已经用了body { display: flex; flex-direction: column; }来实现垂直布局，也给main加了flex:1想让它占满中间剩余空间，但默认情况下，html和body的高度是由内部内容撑开的，并不是铺满整个浏览器视口。这就导致body这个flex容器的高度只够容纳header、main和footer的内容，footer自然不会被推到页面底部。

解决方案 #

只需要给html和body设置足够的高度，同时去掉默认的外边距，就能让footer乖乖贴底：

修改后的完整CSS代码：

html, body {
  height: 100%;
  margin: 0; /* 移除默认外边距，避免出现滚动条或留白 */
}
body { 
  display: flex; 
  flex-direction: column; 
  background-color: yellow; 
}
footer { 
  height: 20vh; 
  background-color: green; 
}
header { 
  height: 20vh; 
  background-color: blue; 
}
main { 
  display: flex; 
  border: 3px dotted red; 
  flex: 1; 
}
aside { width: 20vw; }
nav { width: 20vw; order: -1; }
article { flex: 1; }

额外优化建议 #

如果你希望页面内容超过视口高度时，footer能跟着内容底部走（而不是固定在视口底部），可以把height:100%换成min-height:100vh：

html, body {
  min-height: 100vh;
  margin: 0;
}

这样既保证了短页面时footer贴底，长页面时也能正常跟随内容滚动。

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