Html Can'；t将两个100 VH的DIV浮在一起

我想要两个都是全高（100vh）和半宽（50vw）的div坐在一起（基本上填满了整个页面）。然而，在Chrome和Firefox中，第二个div总是低于第一个div。如果我将高度降低到50vh，例如，两个div并排放置。奇怪的是，完全相同的代码在jsfiddle.net中工作

html，正文{
背景：红色；
保证金：0；
填充：0；
边界：0；
}
#容器{
高度：100vh；
}
#左{
背景：蓝色；
宽度：50vw；
保证金：0；
填充：0；
边界：0；
浮动：左；
高度：100vh；
}
#对{
背景：黄色；
宽度：50vw；
保证金：0；
填充：0；
边界：0；
浮动：左；
高度：100vh；
}

左边
正确的

这很奇怪，它可以在snippet和jsFiddle中使用，但我只是将其放入一个项目中，并在chrome中打开文件，它看起来就像你说的那样。我认为视图宽度可能包括屏幕大小中的滚动条，这可能会使其溢出

我设置了

#right{float:right}

，您可以看到它与左div重叠。但是，您可以将这两个div的宽度都设置为50%，这样可以：

html，正文{
背景：红色；
边距：0！重要；
填充：0！重要；
边界：0！重要；
溢出：无；
}
#容器{
高度：100vh；
}
#左{
背景：蓝色；
宽度：50%；
边距：0！重要；
填充：0！重要；
边界：0；
浮动：左；
高度：100vh；
}
#对{
背景：黄色；
宽度：50%；
边距：0！重要；
填充：0！重要；
边界：0；
浮动：对；
高度：100vh；
}

左边
正确的

使用

vh

经常会出现问题，这主要是因为滚动条会把它搞砸。你可能已经注意到网页，你可以侧滚一点。大约一个滚动条的宽度

在你的例子中，我想象发生的是一个很小的渲染问题，它导致了一个滚动条的存在，然后迫使那里需要一个永久的滚动条

如果您愿意使用其他css样式，我建议使用flex：

#容器{
高度：100vh；
宽度：100vw；
显示器：flex；
}
#容器>分区{
宽度：50%；
}
#孩子1{
背景：#E6E；
}
#孩子2{
背景：#6EE；
}

在snippet中，它似乎也能工作……50vh是否没有滚动条，100vw是否有滚动条？可能是不同我在这两种情况下都没有看到滚动条。