sticky footer with liquid content container

Question

Hello does anyone know how I can build a liquid content container a have the footer stuck at the bottom without overlapping the content div and without the use of Java-scripts?

I am using the sticky footer of Matthew James Taylor what is a good solution, but not in the layout that I use.

When I set the content div #body to min-height: 100%; then it overlaps the footer. When using minimal height min-height: 700px; then it's not liquid. Does anyone know how I can fix this?

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#container {
    min-height:100%;
    position:relative;
}
#header {
    background:#ff0;
    padding:10px;
}
#body {
    padding:10px;
    padding-bottom:60px;    /* Height of the footer */

    position: absolute;
    min-height: 700px;

    width: 800px;
    background: #ccc;
    margin: auto;

}
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;            /* Height of the footer */
    background:#6cf;
}
/* other non-essential CSS */
#header p,
#header h1 {
    margin:0;
    padding:10px 0 0 10px;
}
#footer p {
    margin:0;
    padding:10px;
}
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
    height:100%;
}
</style>
<![endif]-->



<div id="container">   
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
</div>

additional

I have tried a new approach, but now large content flows out of the divs. I have tried clearfix but that does not work.

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body, html {
        height: 100%;
    }

    #container {
        background: #000;
        width: 700px;
        margin: 0 auto;
        position: relative;
        height: auto !important;
        min-height: 100%;
        height: 100%;
    }

    #content {
        padding-bottom: 100px;
    }

    #footer {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100px;
        width: 100%;
        background: #0f0;
    }
    #header {
        position: absolute;
        left: 0;
        top: 0;
        height: 100px;
        width: 100%;
        background: #0f0;
    }

    #inner {
        position: absolute;
        top: 100px;
        bottom: 120px;
        left: 0px;
        width: 100%;
        background-color: #9BC9D1;
    }
    .clearfix:before,
    .clearfix:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }

    .clearfix:after {
        clear: both;
    }

    /*
     * For IE 6/7 only
     * Include this rule to trigger hasLayout and contain floats.
     */

    .clearfix {
        *zoom: 1;
    }
</style>

HTML

<div id="container">
    <div id="header">
        Header
    </div>
                <div id="content" >







            <div id="inner">
                Content<br>
                Content<br>

                Content<br>
                Content<br>
                Content<br>
                Content<br>
                Content<br>
                Content<br>
                Content<br>
                Content<br>
                Content<br>
                Content<br>

                Content<br>
                Content<br>
                Content<br>
                Content<br>
                Content<br>
                Content<br>
                Content<br>


            </div>



                </div>
    <div id="footer">
        Footer here
    </div>        
</div>

Does it have to be in a container? Can't the elements be direct children of the <body>-element? — insertusernamehere

Neil Girardi Neil Girardi · Accepted Answer · 2013-09-15T00:26:18

A pure CSS solution may work for the initial page load but the moment the user re-sizes the page the footer is going to move. I would suggest using jQuery. The strategy would be to define a function and call it when the DOM loads and when the .resize() event is fired.

sticky footer with liquid content container

additional

1 Answers