我试图将页面分成两个相等的区域，每个区域占据页面高度的 100% 和页面宽度的 50%。
但是，这会导致页面底部出现烦人的空白，这也会导致整个页面上出现烦人的滚动条。
通常，我会使用浏览器的 DOM 检查器来查找导致不需要空间的原因，但在这里没有用，因为空格似乎位于 html 标记之外（？！）。
HTML如下（为清楚起见，省略了正文之外的所有内容）
<body><div id="box1"></div><div id="box2"></div></body>
CSS如下：
* { box-sizing: border-box; border: 1px solid red; }
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div {
display: inline-block;
}
#box1 {
height: 100%;
width: 50%;
background-color: blue;
}
#box2 {
height: 100%;
width: 50%;
background-color: green;
}
我还创建了一个JSFiddle，它设法复制了这个问题。
我遇到了这个看起来很相似的问题，但是那里的答案都没有解释为什么会发生这种情况（这个答案确实提供了何时存在 img 标签的解释），并且所有修复似乎都像是黑客或变通方法。
编辑：为了回应评论（似乎已经消失），该问题在 Windows 10 上的 Firefox 49.02 和 Edge 38.14393.0.0 中的 Fiddle 中复制。它也发生在 Chrome 54.0.2840.71 中，但不太明显（和如果窗口最大化，滚动条似乎不会移动）。
我相信有些人会补充这一点，但这是我的理解......
你有div {display: inline-block;}。内联块有点像块，但被视为文本，因此行高很重要。如果您将 CSS 的第一行更新为...
* { box-sizing: border-box; border: 1px solid red; line-height: 0;}
...空白将会消失。在小提琴中尝试使用行高来改变空白量。14px 及以上的值开始为我添加空白。