javascript - 100% 高度不适用于浏览器调整大小

Question

我正在构建 fullPage.js 的替代方案，它将更好地满足我的需求，但我在调整浏览器大小时让部分保持在 100% 高度时遇到了一些问题。

我有 5 个部分，它们始终都是 height: 100%, width: 100%。您一次只能在浏览器视口(viewport)中获取一个部分。我使用附加到每个部分 id 的 anchor 来完成此操作。然后 body 有 overflow: hidden 来防止垂直滚动。每个部分包含的图像也应占用 height: 100%，width 会自动确定以保持图像的纵横比。

这个解决方案在我第一次加载页面时有效，但是一旦浏览器开始调整大小，其他部分就会变得可见，并且 img 的 height: 100% 变得比整个浏览器高度小得多。这是 CSS 的限制，还是我做错了什么？

是否有一个 javascript 解决方案来检测浏览器视口(viewport)，并将这些 height 和 width 值应用于一系列 id'？

这是我的 codepen .

Answer 1

将此添加到您的 HEAD 部分

<meta name="viewport" content="width=device-width, initial-scale=1">

然后在你的 CSS 中:

html, body{
  height:100%;
}
@-ms-viewport{
  width: device-width;
}

此外，我建议使用 vh(视口(viewport)高度)和 vw(视口(viewport)宽度)。 Read more here