I'm currently facing an issue with the footer on a website I'm working on. Everything is working fine except for when the site is viewed on Safari on an iPad. The footer is appearing way above the bottom of the page and after spending an hour trying to fix it, I'm still stuck. If anyone has encountered this problem before, I would greatly appreciate any guidance on how to resolve it.
Below is the basic HTML markup:
<html>
<body>
<form>
<iframe></iframe> <!-- This is where the different pages are set -->
</form>
<footer>
</footer>
</body>
</html>
Here is the CSS code:
html,
body {
margin:0;
padding:0;
height:100%;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height:40px; /* Height of the footer */
background:#6d8085;
}
Works fine in Chrome:
Issue on iPad Safari:
Any help would be greatly appreciated. Thank you!