Question

我试图将页面分成两个相等的区域，每个区域占据页面高度的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 ，可以设法复制问题。

我遇到的this question看起来很相似，但没有一个答案可以解释为什么会发生这种情况（this answer确实提供了img标签存在时的解释）并且所有修复都看起来像黑客或解决方法。

编辑：为了回应评论（似乎已经消失），问题在Windows 49中的Fiddle和Windows 10中的Edge 38.14393.0.0中复制。它也出现在Chrome 54.0.2840.71中，但它更少引人注目（如果窗口最大化，滚动条似乎不会移动）。

Answer 1

只需在正文标记css中添加overflow:hidden。

* { box-sizing: border-box; border: 1px solid red; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow:hidden;
}

div {
  display: inline-block;
}

#box1 {
  height: 100%;
  width: 50%;
  background-color: blue;
}

#box2 {
  height: 100%;
  width: 50%;
  background-color: green;
}

<body><div id="box1"></div><div id="box2"></div></body>

Answer 2

我相信有些人会加入这个，但这是我的理解......

你有div {display: inline-block;}。内联块有点像块，但被视为文本，因此行高很重要。如果您将CSS的第一行更新为...

* { box-sizing: border-box; border: 1px solid red; line-height: 0;}

......空白会消失。在小提琴中使用线条高度来改变你拥有的空白区域。 14px及以上的值开始为我添加空格。

删除html / body height底部的空格：100％layout

2 个答案: