CSS中的视口参数有多准确？

Question

我尝试使用viewport参数div使两个vw填充页面宽度。但是，div s＆＃39;宽度不准确和重叠。 DEMO

我可以将它们封装在一个容器中，然后使用%来设置宽度，从而得到所需的结果。 DEMO

我的问题是，为什么它不适用于vw？如果是因为viewport不准确，那么它有多不准确？导致viewport不准确的原因是什么？

更新：当我加载第一个DEMO时，它最初重叠。但是，当我左右移动窗口的滑块几次时，重叠消失。当我在我的测试网站上尝试此操作时，重叠也在那里，但不会消失，但我会调整窗口大小。

Answer 1

这是因为你的身体有一个边缘。将正文的填充/边距设置为0，现在它可以正常工作。

CSS中的vw参数基于整个视口，无论它在哪个容器中（%占用容器的百分比）。如果容器中没有足够的空间，您将得到这样的行为。