0

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;
}
1
  • 2
    Google for a 'sticky' footer, there are lots of guides on how to accomplish this
    – RyanS
    Feb 20, 2014 at 19:19

2 Answers 2

2

Try change to :

footer {
  position: fixed; /* instead of absolute */
}
5
  • 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, 2014 at 19:21
  • Yeah it will make your element go out of the flow. Feb 20, 2014 at 19:22
  • @Victor, it doesn't matter. This answer gives the OP exactly what he asked for, a fixed bottom.
    – LcSalazar
    Feb 20, 2014 at 19:23
  • 2
    This isn't what the asker was querying about.
    – Etheryte
    Feb 20, 2014 at 19:24
  • @Bucthree In that case you're quite bad at describing what you're looking for.
    – Etheryte
    Feb 20, 2014 at 19:33
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;
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.