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