html / body上的高度100％不适用于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.

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

I have my html,body CSS set to this:

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

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

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.

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

Does anyone know what could be causing this?

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

Thanks!

谢谢！

4 个解决方案

#1

You could use:

你可以使用：

height: 100vh;

which will be 100% viewport height.

这将是100％的视口高度。

Browser compability: http://caniuse.com/#search=vh

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

#2

You can use calc, -moz-calc and -webkit-calc. For instance, Let's say the footer is 100px height, then:

您可以使用calc，-moz-calc和-webkit-calc。例如，假设页脚高度为100px，那么：

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

#3

try adding

尝试添加

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

to your CSS rule

你的CSS规则

#4

You can also make a screen specific style

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

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

More about media queries here http://cssmediaqueries.com/what-are-css-media-queries.html

有关媒体查询的更多信息，请访问http://cssmediaqueries.com/what-are-css-media-queries.html

#1