移除html/body height: 100% layout底部的空白

我想把一个页面分成两个相等的区域，每个区域占页面高度的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标签出现时)，所有的修复看起来都像是hack或变通方法。

编辑:回应评论(似乎已经消失)，这个问题在Firefox 49.02和Edge 38.14393.0.0的Windows 10中重复出现。它也发生在Chrome 54.0.2840.71，但它是不太明显(和滚动条似乎不移动，如果我有窗口最大化)。

我相信有些人会补充这一点，但这是我的理解…

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

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

…空格会消失。通过调整行高来改变留白的大小。

在body tag 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>

相关内容

最新更新

热门标签：