设置height:100%的body元素计算高度与实际高度不符的原因

这是个很常见的CSS误区，我来给你拆解清楚：

首先，你设置的html, body { height:100%; }，这里的百分比高度是相对于父元素的高度计算的：

• html的父容器是浏览器视口（viewport），所以它的高度会被设为当前视口的高度（比如你看到的321px）；
• body的父元素是html，所以DevTools里显示的「计算高度」（computed height）就是继承自html的视口高度，这是CSS规则下的设定值。

但为什么实际渲染时body的高度会跟着1000px的.content走呢？因为块级元素的默认特性是“被内容撑开”——哪怕你给它设置了固定/百分比高度，只要子元素的高度超出了这个设置值，body会自动扩展高度来容纳内容，这是浏览器的默认排版行为。此时DevTools里的「计算高度」显示的是你CSS中指定的高度值，而实际页面里的body高度是被内容撑开后的真实高度。

你可以做个小实验验证：给body加一行overflow:hidden，此时body的高度就会严格等于视口高度，超出的.content部分会被截断，这时候计算高度和实际渲染高度就一致了。

你的代码复现： #

CSS代码

html,body{ width:100%; height:100%; background: #ccc; }
.content { width: 20px; height: 1000px; background: #666; }

HTML代码

<html>
<head></head>
<body>
<div class="content">
</div>
</body>
</html>

截图参考 #

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