Search code examples
htmlfootersticky

Making main content sit above a sticky footer

I have setup a sticky footer and would like the main content to sit above it.

At the moment the content runs behind the footer, I'm wanting to get the div#fullContainer to sit above the footer. So that the red background sits above the footer.

I hope that makes sense.

<div id="fullContainer" style="background-color:red">
    <div id="container">
        <div id="content" >Text here</div>
    </div>
</div>

<div class="footer" id="container">footer content</div>


.footer {

    border-top:3px solid #ff0000;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 180px;

}
Solution

  • This should do it - http://jsfiddle.net/Ballcheck/dp6LS/

    Just added the following container class -

    #fullContainer {
    position: absolute;
    height: auto;
    width: 100%;
    top: 0px;
    left: 0px;
    bottom: 180px;
}