How to make a footer stay on the bottom?

Question

I have a page where I want the header to stay on top of the page and the footer to stay on the bottom and the content that is placed in the main content area to scroll if the page has more content than the space allows, but Im not sure how to go about doing this.

HTML

    <header>
        <div id="headerContainer">
            <img src="images/logo.png" alt="" />
        </div><!-- END headerContainer -->

    </header>

    <div id="bodyContainer">

        <div id="products">
            <ul>
                <li><img src="images/mc1.png" alt="" /></li>
                <li><img src="images/mc1r.png" alt="" /></li>
                <li><img src="images/mc3.png" alt="" /></li>
                <li><img src="images/mc3e.png" alt="" /></li>
            </ul>
        </div><!-- END products -->

    </div><!-- END bodyContainer -->

    <footer>

        <div id="footerContainer">
        </div><!-- END footerContainer -->

    </footer>

CSS

header {
    width: 100%;
    height: 200px;
    background: #808284;
    background-image: -o-linear-gradient(top, #58595b 0%, #808284 100%);
    background-image: -moz-linear-gradient(top, #58595b 0%, #808284 100%);
    background-image: -webkit-linear-gradient(top, #58595b 0%, #808284 100%);
    background-image: -ms-linear-gradient(top, #58595b 0%, #808284 100%);
    background-image: linear-gradient(to top, #58595b 0%, #808284 100%);
    border-bottom: 5px solid #d9b34d;
    box-shadow: 3px 0px 5px #0b0b0b;
}

#headerContainer {
    width: 1200px;
    margin: 0 auto;
}

#headerContainer img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 60px;
}

#bodyContainer {
    width: 1200px;
    margin: 0 auto;
}

footer {
    width: 100%;
    height: 100px;
    background: #808284;
    background-image: -o-linear-gradient(top, #808284 0%, #58595b 100%);
    background-image: -moz-linear-gradient(top, #808284 0%, #58595b 100%);
    background-image: -webkit-linear-gradient(top, #808284 0%, #58595b 100%);
    background-image: -ms-linear-gradient(top, #808284 0%, #58595b 100%);
    background-image: linear-gradient(to top, #808284 0%, #58595b 100%);
    box-shadow: 3px 0px 5px #0b0b0b;
    position: absolute;
    bottom: 0;
    right: 0;
}

Google for a 'sticky' footer, there are lots of guides on how to accomplish this — RyanS, Feb 20 '14 at 19:19

score 2 · Answer 1 · answered Feb 20 '14 at 19:18

2

Try change to :

footer {
  position: fixed; /* instead of absolute */
}

answered Feb 20 '14 at 19:18

enguerranws

8,087
8
49
97

a `fixed` position will make the elements on the page overflow, in will not be on the same z-index and in the same "universe" with all other elements. – Victor Feb 20 '14 at 19:21
Yeah it will make your element go out of the flow. – enguerranws Feb 20 '14 at 19:22
@Victor, it doesn't matter. This answer gives the OP exactly what he asked for, a fixed bottom. – LcSalazar Feb 20 '14 at 19:23
2

This isn't what the asker was querying about. – Etheryte Feb 20 '14 at 19:24
@Bucthree In that case you're quite bad at describing what you're looking for. – Etheryte Feb 20 '14 at 19:33

score 0 · Answer 2 · answered Feb 20 '14 at 19:27

0

I have just created this for you.

.site-footer, .page-wrap:after {
    /* .push must be the same height as footer */
    height: 141px;
}
.site-footer {
    border-top: 1px solid #666;
    background: #eeeeee;
}

answered Feb 20 '14 at 19:27

Victor

13,914
19
78
147

How to make a footer stay on the bottom?

2 Answers2