未显式设置高度，stats元素为何占满视口？求解height:100%机制

你遇到的问题核心是CSS百分比高度的计算逻辑，以及浏览器对根元素的特殊处理，和你之前的认知偏差点具体如下：

百分比高度的标准逻辑 #

按照CSS规范，当给元素设置height: 100%时，它的高度是**基于父元素的「显式定义高度」**计算的。如果父元素高度为auto（自适应内容），那么height:100%应该被解析为auto，即元素高度由自身内容决定。

为什么你的情况里百分比高度生效了？ #

问题出在浏览器对根元素的兜底行为，以及BFC（块级格式化上下文）的影响：

• 根元素的特殊处理：默认情况下html和body的高度是auto，但当页面中存在子元素链试图使用height:100%，且所有祖先都没有显式高度时，浏览器会自动将html和body的高度设为视口高度（等同于100vh），给百分比高度提供计算基准。
• BFC的影响：你的.container设置了overflow: auto，这会创建一个BFC。在BFC中，父元素的高度计算会包含内部所有子元素的高度，包括设置了百分比高度的子元素。所以.grid的height:100%会向上传递，让.container、.stats最终继承视口高度，导致整个section占满屏幕。

解决办法 #

• 直接移除.grid中的height: 100%，这样grid的高度会由内部图标、文字等内容撑开，section的高度也会恢复为自适应内容的状态。
• 如果需要grid内部元素垂直居中，但不想让grid占满父元素高度，可以改用min-height配合align-items: center，或者给grid添加上下内边距来撑起垂直空间，替代height:100%。

内容的提问来源于stack exchange，提问作者Dao Xuan Dung FX21334