CSS中为何容器设置height: 100%不生效？如何使其占满页面高度？

核心操作 #

百分比高度的计算依赖父元素的显式高度声明，你需要给container的所有上级祖先元素（即html、body标签）都设置高度为100%，就能让container的height: 100%设置生效。

代码示例 #

/* 先给根标签和body设置100%高度，同时清除默认边距避免多余滚动条 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 此时container的100%高度就有了可参照的父元素高度 */
.container {
  height: 100%;
  /* 其他你原本的container样式 */
}

原理解释 #

• CSS 中百分比高度的默认计算规则是：如果父元素没有显式定义高度值（默认值为auto，即高度由内部内容总高度决定），那么子元素设置的百分比高度会直接失效，元素高度最终由自身内容高度决定。
• container的直接父元素是body，body的父元素是根html标签，二者默认高度都是auto，因此仅给container设置height: 100%没有可参照的高度基准，只能被内容撑开。
• 给html和body都设置height: 100%后，二者的高度会直接适配视口高度，此时container的百分比高度就可以正常继承父级高度，实现占满整页的效果。

注意：如果你的container外层还有其他嵌套的父容器，需要给所有层级的上级父元素都加上height: 100%才能生效。

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