确保div容器在垂直调整大小时保持全高

Question

这是我的容器：

.test {
  height: 100vh;
}

更新：这实际上在 firefox 中没有问题。

每当加载页面时，它会延伸到网页的整个高度，但是当我垂直调整页面大小时，似乎视口不会更新。在第一张图像中，div是视口的整个高度：

但是，当我垂直调整浏览器窗口大小时，.test div不会更新 - 请参阅下面的图片。

要亲眼看看，请在此处查看代码表：http://codepen.io/anon/pen/CLbqy

我应该将窗口水平调整大小，但是，高度会重置为正确的视口高度。

Answer 1

一个可能的建议是，您应该使用%代替vw或vh。由于我们可能无法在font-size中提供%，而不是px或em，我们可以使用vw或类似的内容。

现在如果vm中提供的字体，如果重新调整大小，他们将无法加载window height和width的新更改。所以这是一个小的解决方案，我在一篇随机文章中找到了。

causeRepaintsOn = $("#yourTagIdWithFontInVM");

$(window).resize(function() {
  causeRepaintsOn.css("z-index", 1);
});

这是我找到上述解决方案的链接。 Link

Answer 2

这可能是在CodePen iframe中滚动的问题。当我阻止页面溢出时，它对我来说效果更好：

html, body  {
  margin:0;
  padding:0
}