Search code examples
cssipadfooter

Misplaced footer when viewed on iPad's Safari

A website that I'm currently working on works completely fine in regards to the footer, however when viewing the website on the iPad's Safari, the footer is misplaced quite a bit above the bottom of the page and after an hour of trial and error I'm not getting anywhere fast. I was hoping someone had this very issue and can perhaps aid me by explain what you did to resolve the issue.

This is the basic markup of my HTML.

<html>
<body>
    <form>
        <iframe></iframe> <!-- This is where the different pages are set -->
    </form>
    <footer>
    </footer>
</body>
</html>

Here's the CSS

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

.footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:40px;   /* Height of the footer */
   background:#6d8085;
}

Chrome

enter image description here

iPad

enter image description here

Thanks a lot for the help!

Solution

  • Try position:fixed;

    or changing height to min-height on your css declaration

    Basically your content is peeking out of your page. To see this add body{background-color:red;}