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

Question

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

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

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

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

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

谢谢!

Answer 1

你可以使用:

height: 100vh;

这将是100%视口高度.

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