100% 高度不适用于浏览器调整大小答案

【问题标题】：100% Height Not Working On Browser Resizing100% 高度不适用于浏览器调整大小
【发布时间】：2014-08-28 10:15:17
【问题描述】：

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

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

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

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

这是我的codepen。

【问题讨论】：

标签： javascript jquery html css fluid-layout

【解决方案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

【讨论】：

我已经进行了您提到的更改。我将<meta> 添加到<head> 并添加了CSS。我还更改了部分容器以使用 vh 和 vw 值而不是百分比。如果您看到我更新的 codepen，那么只有第一部分可以按您的预期工作。当您调整大小时，第一个 (#people) 下面的部分都会再次变得混乱。查看更新的codepen。
Safari 和 Chrome。您必须单击左侧底部 3 个链接之一，然后调整 codepen 高度。它将中断并显示上方和下方的行。再次单击左侧的链接后，它将再次重新解释值并使其看起来正常，但再一次，如果您调整 codepen 的大小，它会中断。
在#people, #places, #things, #food 的代码中将height: 100vh; 更改为min-height: 100vh;
这让事情变得更糟。更新codepen。当height: 100vh 代替min-height: 100vh 时效果更好。你能让它在你的末端工作吗？如果是这样，请分叉并将该链接发送给我，以便我看看我做错了什么。
您是否单击底部三个链接之一并在 codepen 中上下调整大小？您的 codepen 无法在 Chrome、Safari、Opera 或 Firefox 中使用。