html creating dynamic page with footer and header and content

Question

So far with help I have this:

When content is big then all shows up as needed - sexy. But when content is for example 1 line footer offcourse sticks to the bottom of the content.

I need some magic, so that footer sticks to the end of content, but when content is smaller than page height -500 px (fixed for header and footer) than footer must remain on bottom of the page. How to do such magic? See attached pictures:

CSS:

* {
padding: 0;
margin: 0;
}

html, body {
height: 100%;
width: 100%;
}

body{
}

.header{
width: 100%;
height: 300px;
padding-top: 30px;
background-color: gold;
}

#content{
width: 100%;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

background-color: yellow;
}

#footer{
width: 100%;
height: 100px;
position: relative;
z-index: 1;
background-color: orange;
}

here is fiddle on this: http://jsfiddle.net/Cheese1991/VcK83/

Example:

From screenshot number 1 we see that our header (300px with margin 30px), dynamic size content ( never is known ) but for this example lets say 200px and footer (100px) fit on the &(window).height() that in the example is 775px.

So we have 775-330-200-100=145px of free size ( the white blank space )

I want to achieve 1 out of to possibilities:

1) The content will take the free space to its size, so that html, body, etc will still remain 775px and there was no overflow (scroller on the right size) because components fit in, we don't need more space than we have.

2) The footer will position itself on the bottom (not position fixed on the page, because then content will hide behind it)

Here are 2 of the possibilities in pictures:

1)

2)

Answer 1

Use min-height to #content. See this-jsfiddle

EDIT

* {
padding: 0;
margin: 0;
}

html, body {
height: 100%;
width: 100%;
}

body{
}

.header{
width: 100%;
height: 300px;
padding-top: 30px;
background-color: gold;
}

#content{
width: 100%;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

background-color: yellow;
}

#footer{
width: 100%;
height: 100px;
    position: absolute;
    bottom: 0px;
    width: 100%;

background-color: orange;
}

And use this Jquery code

$(document).ready(function(){
    var $footer = $('#footer');

    var contentHeight = $('#content').outerHeight();
    var headerHeight = $('.header').outerHeight();
    var footerHeight = $footer.outerHeight();
    var bodyHeight = $('body').outerHeight();   
    var headerPContentPFooter = contentHeight+headerHeight+footerHeight;



    if(headerPContentPFooter > bodyHeight){
        $footer.css('position','relative');
    }

    $(window).resize(function(){
    var contentHeight = $('#content').outerHeight();
    var headerHeight = $('.header').outerHeight();
    var footerHeight = $('#footer').outerHeight();
    var bodyHeight = $('body').outerHeight();

    var headerPContentPFooter = contentHeight+headerHeight+footerHeight;

        if(headerPContentPFooter > bodyHeight){
            $footer.css('position','relative');
        }else{
            $footer.css('position','absolute');
        }   

    });
});