Keeping the footer at the bottom

问题

http://jsfiddle.net/W4PKg/

I have a page with similar structure:

<div id="page">
    <div id="content">
        <h1>News:</h1>
        <div class="body">
            <div class="news">
            </div>
        </div>
     </div>
     <div id="footer">
         <div class="wrapper">
              <p>stuffstuffstuff</p>
         </div>
     </div>
</div>

It seamed okay while there weren't many content in it, but when I added more text the footer started acting weirdly and eventually just flew to the middle of the page. I've tried a few solutions posted in the net but none of them seem to do the trick or I'm just doing something wrong. Anyway, hoping I can find some help here

回答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/

*/

回答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 */
}

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

回答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 .

来源：https://stackoverflow.com/questions/23275954/keeping-the-footer-at-the-bottom

标签

html

css

footer