为何设置box-sizing:border-box的100%高度div仍溢出body/html父元素？

你的代码里导致div.a溢出的核心原因有两个：

1. box-sizing属性拼写错误 #

你写的是box-sixing，正确的属性名是box-sizing——这个拼写错误直接导致该属性完全没有生效，浏览器会忽略这个无效的CSS声明。

2. 父元素的盒模型计算方式问题 #

body和html默认的box-sizing值是content-box，在这个模式下，元素的height属性仅代表内容区的高度，边框和内边距会额外增加元素的总高度。

你给body和html设置了：

height: 100vh;
border: 5px solid black;

这意味着它们的总高度是 100vh + 10px（上下边框各5px），已经超出了视口的高度（100vh）。而div.a的height:100%是继承父元素（body）的内容区高度（也就是100vh），再加上父元素本身已经超出视口，最终就会让div.a看起来“溢出”了父元素和视口。

要解决这个问题，你需要做两处修改：

1. 修正box-sizing的拼写错误；
2. 给html和body也设置box-sizing: border-box，让它们的高度计算包含边框，确保总高度刚好是100vh。

修改后的完整代码：

html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  border: 5px solid black;
  box-sizing: border-box; /* 给父元素添加盒模型设置 */
}

div.a {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 修正拼写错误 */
  background-color: blue;
}

<div class='a'></div>

这样修改后，html和body的总高度会被限制在100vh（边框包含在高度内），div.a的100%高度会刚好填满body的内容区，不会出现溢出。

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