正文 HTML 高度 100%答案

【问题标题】：body HTML height 100%正文 HTML 高度 100%
【发布时间】：2014-04-28 02:15:25
【问题描述】：

当我尝试将 html,body 设置为 100% 高度时，所有依赖滚动位置的 jquery 脚本都停止工作。为什么是这样？ http://creativelycoded.com/demos/Astonish/one-page/index.html

这是我的网站。如果您使用检查元素并添加 100% 高度，您会明白我的意思。

我需要 100% 的高度来获得 background-size: cover 才能在 iPhone 和 iPad 上正常工作。现在背景图像缩放到文档的整个高度。但是当我将 100% 的高度添加到 html 和 body 时，它们可以正确缩放，但我的脚本搞砸了。

任何帮助将不胜感激。

谢谢约翰

【问题讨论】：

【解决方案1】：

您不能拥有 height:100% 的 html 或 body 并使用基于滚动位置的脚本。 scrollTop() 不再有效

试试html, body{ height:100vh; }

这是在 CSS3 中使用新的 vh 单位，这意味着 100% 的视口高度。它适用于现代浏览器。

【讨论】：

【解决方案2】：

我相信将高度设置为 100% 意味着将没有滚动条，因此没有滚动位置。

如果你设置 css:

html{ overflow-y: scroll; }

它可能会修复它。

【讨论】：

【解决方案3】：

在您的 html 代码中添加样式，例如 style="height:100%"

【讨论】：