CSS Layout that uses 100% height

Question

Guys, I have a CSS Layout that I am using that has a header, footer and a sidebar on the left. It works great, but the only problem is, I would like the sidebar and the footer to extend to the bottom of the screen if there is not enough content to fill the main content. How do I do this in CSS? I have posted the css here so you can see what I'm working with:

<style type="text/css">
    body
    {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background: #666666;
        margin: 0;
        padding: 0;
        text-align: center;
        color: #000000;
    }
    .twoColHybLtHdr #container
    {
        width: 80%;
        background: #FFFFFF;
        margin: 0 auto;
        border: 1px solid #000000;
        text-align: left;
    }
    .twoColHybLtHdr #header
    {
        background: #DDDDDD;
        padding: 0 10px;
    }
    .twoColHybLtHdr #header h1
    {
        margin: 0;
        padding: 10px 0;
    }
    .twoColHybLtHdr #sidebar1
    {
        float: left;
        width: 8em;
        background: #EBEBEB;
        padding: 15px 0;
    }
    .twoColHybLtHdr #sidebar1 h3, .twoColHybLtHdr #sidebar1 p
    {
        margin-left: 10px;
        margin-right: 10px;
    }
    .twoColHybLtHdr #mainContent
    {
        margin: 0 20px 0 9em;
    }
    .twoColHybLtHdr #footer
    {
        padding: 0 10px;
        background: #DDDDDD;
    }
    .twoColHybLtHdr #footer p
    {
        margin: 0;
        padding: 10px 0;
    }
    .fltrt
    {
        float: right;
        margin-left: 8px;
    }
    .fltlft
    {
        float: left;
        margin-right: 8px;
    }
    .clearfloat
    {
        clear: both;
        height: 0;
        font-size: 1px;
        line-height: 0px;
    }
</style>

And an example of how to use it:

<div id="container">
    <div id="header" style="text-align: center"> Header goes here </div>
    <div id="sidebar1">Sidebar is here</div>
    <div id="mainContent">Main Content here</div>
    <br class="clearfloat" />
    <div id="footer">Footer Here</div>
</div>

Answer 1

You should look at the min-height CSS property, however be careful because it is not supported correctly on all browsers (notably IE.. - as if that was news to anybody)

You may also want to check out CSS min-height hacks on Google

Answer 2

take a look at http://ryanfait.com/sticky-footer/ you will need to adjust your code slightly as all the content apart from the footer needs to be in a wrapper div. Josh

Answer 3

Checkout sticky footers

http://ryanfait.com/sticky-footer/ http://www.cssstickyfooter.com/

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="footer">

</div>

and

* {margin:0;padding:0;} 



html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Kind of duplicate http://stackoverflow.com/questions/971123/css-fixed-to-bottom-and-centered/971131

Answer 4

It can be done using display:table with 100% height but then naturally IE doesn't support that either. I often do table layouts using divs with the class names table, tr and td and then get IE to replace those classes with the equivalent tag. This way I get around the whole table as layout debate. If you don't care about semantics you can always ignore the purists and do things like this with real tables. It's one thing to be a CSS purist, but it's an expensive religion when the highest market-share browser is a mongoloid retard with 90's technology.