为何浏览器开发者工具中HTML元素高度与视口实际高度不符？

核心原因：根元素的默认高度行为 #

浏览器中，根元素（<html>）的默认height值为auto，这意味着它会被子元素（<body>）的内容完全撑开。当<body>的内容高度超过视口时，<html>的高度会自动延伸到与<body>内容高度一致，而非保持视口高度。

关于滚动条的误解 #

你看到的页面滚动条，本质是浏览器为视口创建的，用于滚动整个页面内容（包括<html>和<body>）。滚动条出现的原因是整个页面内容（<html>的高度）超过了视口范围，而非<html>本身高度小于<body>。

验证与修正方法 #

• 你可以通过背景色验证：给<html>设置独特背景色，<body>设置另一种，当<body>内容超出视口时，<html>的背景色会延伸到内容底部，证明它的高度和<body>一致。
• 如果想让<html>高度固定为视口高度，只需显式设置CSS：

  html {
    height: 100vh; /* 或 height: 100%; */
    overflow: auto;
  }
  

  此时<html>高度被固定为视口高度，当<body>内容超出时，<html>内部会出现滚动条，开发者工具里<html>的高度也会显示为视口高度。

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