在html / body上的高度100％在iPhone上不工作 [英] Height 100% on html/body is not working on iPhone

问题描述

我已经使用Foundation创建了一个响应式网站，其中的页脚绝对位于页面底部。在我的桌面浏览器，它看起来完全像它应该，但在我的iPhone页脚是重叠的一些内容，而不是一直在页面的底部。

I have created a responsive website using Foundation with a footer that is absolutely positioned on the bottom of the page. On my desktop browsers, it looks exactly like it should, but on my iPhone the footer is overlapping some of the content instead of being all the way at the bottom of the page.

我有我的html，body CSS设置为：

I have my html,body CSS set to this:

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

但是当我使用Safari开发工具检查手机上的页面时，我将鼠标悬停在html或body标记上，它不会一直延伸到页面的底部，这是什么导致我的页脚重叠的内容。

But when I inspect the page on my phone using the Safari developer tools, when I hover over the html or body tag, it is not extending all the way to the bottom of the page which is what's causing my footer to overlap content.

有人知道是什么原因造成的？

Does anyone know what could be causing this?

谢谢！

推荐答案

使用：

height: 100vh;

这将是100％的视口高度。

which will be 100% viewport height.

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

这篇关于在html / body上的高度100％在iPhone上不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！