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 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!

Answer 1

You could use:

height: 100vh;

which will be 100% viewport height.

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