Keeping the footer at the bottom

Question 1

Here is the best solution for sticky footer without positioning: http://ryanfait.com/sticky-footer

HTML

<body>
    <div class="wrapper">
        <div class="header">
            <h1>CSS Sticky Footer</h1>
        </div>

        <!-- content -->

        <div class="push"></div> <!-- This pushes the footer off -->
    </div>    
    <div class="footer">

    </div>
</body>

CSS

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Question 2

Maybe try something like this:

HTML

<div class="page-wrap">

  <!-- HTML stuff -->

</div>

<footer class="site-footer">
  <!-- Footer stuff goes here -->
</footer>

CSS

.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  /* footer style */
}

Question 3

You can use something like this in your css

body{
  padding-bottom: 40px;
}
#footer{
  position: fixed; /* works fine on ios */
  bottom:0;
  left:0;
  width:100%;
  height: 40px;
}

Question 4

So I've been trying to get this to work for my cookie notice bar, which normally is placed on the top of the page (see http://www.corwouters.nl), with z-index set a certain way to have it on top of everything until dismissed. but for iOS I want it placed on the bottom. so then I stumbled on another site that got this to work with pure css and no javascript at all, so I'll share this here for all of you:

#sticktobottom { 
    position: fixed;
    top: auto;
    bottom: 0;
}

*replace #sticktobottom with the name of your div, footer, span or other element that you want to stick to the bottom. I've checked it and it appears to work on all major browsers, desktop and mobile including iOS. Also on iOS it will stick to the navigation bar when scrolling, which is the desired behavior .