身高在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

Answer 2

尝试添加

min-height: 100%; 
min-width: 100%; 

你的CSS规则

Answer 3

您可以使用calc, -moz-calc and -webkit-calc。举例来说，假设页脚是100px height，则：

html, body, .container{ 
    height: -moz-calc(100% - 100px); 
    height: -webkit-calc(100% - 100px); 
    height: calc(100% + 30px - 100px); 
    margin:0; 
    padding:0; 
} 

Answer 4

您也可以让一个屏幕特定样式

@media screen { 
    html, body { 
    height: 100vh; 
    } 
} 

此处详细了解媒体查询http://cssmediaqueries.com/what-are-css-media-queries.html