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

Question

这是我的容器:

.test {
  height: 100vh;
}

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

每当加载页面时，它都会延伸到网页的整个高度，但是当我垂直调整页面大小时，视口(viewport)似乎没有更新。在第一张图片中，div 是视口(viewport)的整个高度:

但是，当我垂直调整浏览器窗口大小时，.test div 没有更新 - 见下图。

要亲自查看，请查看此处的代码笔:http://codepen.io/anon/pen/CLbqy

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

Answer 1

一个可能的建议是您应该使用 % 而不是 vw 或 vh。由于我们可能无法在 % 中给出 font-size，我们可以使用 vw 或类似的东西来代替 px 或 em .

现在，如果在 vm 中给出字体，它们将不会加载 window height 和 width 的新变化如果重新调整大小。所以这是我在一些随机文章中找到的一个小解决方案。

causeRepaintsOn = $("#yourTagIdWithFontInVM");

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

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