user3461434 user3461434 - 6 months ago 13
CSS Question

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

DD. DD.
Answer

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/

*/
Comments