我试图将页面分成两个相等的区域，每个区域占据页面高度的 100% 和页面宽度的 50%。
但是，这会导致页面底部出现恼人的空白，进而导致整个页面出现恼人的滚动条。
通常，我会使用浏览器的 DOM 检查器来查找导致不需要的空间的原因，但这在这里没有用，因为空白似乎位于 html 标记之外(？!)。
HTML 如下(为清楚起见，省略 body 之外的所有内容)
<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 ，它设法重现了这个问题。
我遇到了 this question这看起来很相似，但那里的答案都没有解释为什么会发生这种情况(this answer 确实提供了 img 标签何时存在的解释)并且所有的修复似乎都是 hack 或解决方法。
编辑:针对评论(似乎已经消失)，问题在 Firefox 49.02 的 Fiddle 和 Windows 10 的 Edge 38.14393.0.0 中重复出现。它也出现在 Chrome 54.0.2840.71 中，但较少很明显(如果我将窗口最大化，滚动条似乎不会移动)。
最佳答案
我相信有些人会对此进行补充，但这是我的理解...
你有 div {display: inline-block;}。行内 block 有点像 block ，但被视为文本，因此行高很重要。如果您将 CSS 的第一行更新为...
* { box-sizing: border-box; border: 1px solid red; line-height: 0;}
...空白将消失。在你的 fiddle 中使用 line-height 来改变你的空白空间量。 14px 及以上的值开始为我添加空格。
关于html - 删除 html/body 高度底部的空白 : 100% layout，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40562282/