Question

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

我有5个部分，所有部分都应该height: 100%, width: 100%。您应该一次只能在浏览器视口中获取一个部分。我使用附加到每个部分id的锚点来做到这一点。然后body有overflow: hidden以防止垂直滚动。每个部分都包含图像，这些图片也应该占用height: 100%，并自动确定width以保持图像的纵横比。

此解决方案在我第一次加载页面时有效，但是一旦浏览器开始调整大小，其他部分就会变得可见，而img的{{1}}会变得很多小于完整的浏览器高度。这是对CSS的限制，还是我做错了什么？

是否有检测浏览器视口的JavaScript解决方案，并将这些height: 100%和height值应用于一系列width＆＃39;？

这是我的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（视口高度）和vw（视口宽度）。 Read more here

100％高度不适用于浏览器调整大小

1 个答案: