Question

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

我的html，body CSS设置为：

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

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

有谁知道造成这种情况的原因是什么？

谢谢！

Answer 1

您可以使用：

height: 100vh;

这将是100％视口高度。

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

Answer 2

您可以使用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 3

尝试添加

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

到您的CSS规则

Answer 4

您还可以制作特定于屏幕的样式

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

有关此处媒体查询的详情http://cssmediaqueries.com/what-are-css-media-queries.html

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

4 个答案: