CSS Footer Fixed Position Based On Minimum Height

I've looked on here and on various tutorial but can't the effect I need. So if the page content is less high than 600px I want the footer fixed below a container that is that heigh

Solution 1:

You can do this by CSS Trick,

/* CSS Code */

body, html{
    padding:0;
    margin:0;
    height:100%;
}

.wrapper{
    min-height:100%;
    position:relative;
}

.container{
    width:960px;
    margin:0 auto;
    padding-bottom:100px;
}

.header{
    height:100px;
    background-color:#066;
}

.footer{
    position:absolute;
    bottom:0;
    height:100px;
    background-color:#006;
    width:100%;
}

<div class="wrapper">
    <div class="container">

        <div class="header">
            Header
        </div>

        <div class="body">

        </div>


    </div>

    <div class="footer">
        Footer
    </div>

</div>

Here is my Fiddle File

Solution 2:

I know you tried min-height but why is this not suitable?

#container
{
    background:#08e;
    min-height:600px;  
}


#footer
{
    background:#ddd;
}