为何页脚无法固定到底部？%与vh属性差异解惑

百分比高度的限制 #

CSS里的百分比高度是基于父元素的计算高度来生效的，但有个关键前提：父元素必须有明确的、非auto的高度值，否则百分比高度会被解析为auto（即元素高度由内容撑开）。

看你的代码：你只给body设置了height: 100%，但没有给html元素设置高度。浏览器默认样式中，html的高度是auto（由页面内容决定），所以body的height: 100%没有有效的参考对象，最终body的高度还是等于内容高度，而非浏览器视口高度。这时候.wrapper的min-height: 100%也无法占满视口，当页面内容不够长时，自然没法把页脚推到底部。

vh单位的特性 #

vh是视口高度单位，1vh等于浏览器可视窗口高度的1%。这个单位不依赖父元素的高度设置，直接以当前浏览器窗口的可视高度为基准。所以给.wrapper设置min-height: 100vh时，不管父元素有没有设置高度，wrapper都会至少占满整个视口高度。再配合main的flex: 1 1 auto让它自动填充wrapper的剩余空间，页脚就会被固定在页面底部。

用百分比实现的修正方案 #

如果想用百分比达到同样效果，需要给html和body都设置高度：

html, body {
  height: 100%;
  margin: 0; /* 清除默认margin，避免不必要的滚动条 */
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.main {
  flex: 1 1 auto;
}

这样html的高度被设为视口高度，body继承这个高度，.wrapper的min-height: 100%就有了正确的参考，也能实现页脚固定。

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