100％高度不能在浏览器调整大小

Question

我正在构建一个替代fullPage.js，这将更适合我的需要，但我有一些问题让浏览器被调整大小时留在100％高度的部分。

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

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

是否有javascript解决方案来检测浏览器视口，并将这些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（视高度）和大众汽车（视宽度）。 Read more here