Search code examples
htmliosiphonecssposition

position:fixed footer in iPhone iOS


Having some trouble getting my footer to stay sitting on the bottom of my page but only on iPhone mobile Safari (iOS6). Works perfectly fine on the iPad and desktop versions using position:fixed. I've looked all over the internet for a solution but nothing I've tried seems to work. If I change it to position:relative, it displays fine on the iPhone but sits too high on the other browser versions. The code I have is:

#footer {
    padding-top: 15px;
    padding-bottom: 5px;
    width: 100%;
    height: 50px;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size: 10px;
    color: #fff;
    text-align: center;
    text-shadow: 2px 0px 5px #000;
    position: fixed;
    bottom: 0;
}

<div id="footer">
  <ul>
    <li><a href="Index.html">Home</a></li>
    <li><a href="Assessment.html" target="_blank">Assessment</a></li>
    <li><a href="Press.html">Press</a></li>
    <li><a href="Careers.html">Careers</a></li>
    <li><a href="News.html">News</a></li>
    <li><a href="Contact.html" target="_blank">Contact</a></li>
    <li><a href="https://www.facebook.com/pages/Southern-Cross-Catholic-College-Japanese/164793893570872" target="_blank">Facebook</a></li>
    <li><a href="http://www.sccc.qld.edu.au">SCCC Home</a></li>
    <li><a href="#top">Top</a></li>
  </ul>
  <p class="fine-print">Created by Maree Carr. &copy; 2014 scccjapan.com. All rights reserved.</p></div>

Thanks in advance :)


Solution

  • All good! Found the answer here: cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css. Why couldn't I have found that a day ago!!