html / body上的高度100％不适用于iPhone

我创建了一个使用Foundation的响应式网站,其页脚绝对位于页面底部.在我的桌面浏览器上,它看起来应该是这样,但在我的iPhone上,页脚重叠了一些内容,而不是一直在页面底部.

我有我的html,身体CSS设置为：

html,body {
    height:100%;
    margin:0;
    padding:0;
}

但是当我使用Safari开发人员工具检查手机上的页面时,当我将鼠标悬停在html或body标签上时,它并没有一直延伸到页面底部,这导致我的页脚重叠内容.

有谁知道是什么原因引起的？

谢谢！

解决方法

你可以使用：

height: 100vh;

这将是100％的视口高度.

浏览器兼容性：http://caniuse.com/#search=vh