html - 不能相邻 float 两个 100vh 的 div

Question

我想要两个全高 (100vh) 和半宽 (50vw) 的 div 并排放置(基本上填满整个页面)。但是，在 Chrome 和 Firefox 中，第二个 div 总是低于第一个。如果我降低高度，例如降低到 50vh，则两个 div 并排放置。奇怪的是，完全相同的代码在 jsfiddle.net 中有效。 https://jsfiddle.net/e6x2j0kr/

html, body {
background: red;
margin: 0;
padding: 0;
border: 0;
}

#container {
  height: 100vh;
}

#left {
  background: blue;
  width: 50vw;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  height: 100vh;
}

#right {
  background: yellow;
  width:50vw;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  height: 100vh;
}

<div id="container">
<div id="left">
  left
</div>
<div id="right">
  right
</div>
</div>

感谢您的帮助。

Answer 1

使用 vh 经常会出问题，主要是因为滚动条会把它弄乱。您可能已经注意到您可以在其中稍微横向滚动的网页。准确地说是一个滚动条的宽度。

在您的情况下，我想发生的事情是一个微小的渲染问题，它导致滚动条存在，然后强制需要永久滚动条。

如果您愿意使用其他 css 样式，我推荐 flex:

#Container {
  height: 100vh;
  width: 100vw;
  display: flex;
}

#Container > div {
  width: 50%;
}

#Child1 {
 background: #E6E;
}

#Child2 {
 background: #6EE;
}

<div id="Container">
  <div id="Child1"></div>
  <div id="Child2"></div>
</div>

我推荐 flex 的原因是无论如何它都会强制元素在同一行。您可能会注意到奇怪的滚动内容。这又是 vh 问题，所以只使用百分比可能会更好。