Height 100% on html/body is not working on 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.

I have my html,body CSS set to this:

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.

Does anyone know what could be causing this?

Thanks!

回答1:

You could use:

height: 100vh;

which will be 100% viewport height.

Browser compability: 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:

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

回答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

来源：https://stackoverflow.com/questions/26144773/height-100-on-html-body-is-not-working-on-iphone