Height 100% on html/body is not working on iPhone

Question

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

Answer 1

You could use:

height: 100vh;

which will be 100% viewport height.

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

Answer 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;
}

Answer 3

try adding

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

to your CSS rule

Answer 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