Set div to fill in the rest of the height dynamically?

Question

So. My code is something along the lines of

Answer 1

you don't have to use a script for that. and also: I recommend you to separate your styling from your markup.

HTML

    

        
    
    
Some content

add this to your CSS

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

/* this is the big trick*/
#wrapper:before {
    content:'';
    float: left;
    height: 100%;
}
#wrapper {
    height: 100%;
    background-color: black;
    color: white;
}
#header {
    background-color:#000;
}
#content {
    background-color: gray;
}
/* this is the big trick*/
#content:after {
    content:'';
    display: block;
    clear: both;
}

Working Fiddle

Tested on: IE10, IE9, IE8, FF, Chrome.

1. didn't use absolute positioning
2. didn't use Script (Pure CSS solution)
3. fluid layout
4. cross-browser

Explanation: with pseudo element, I'm creating a floating element (without content or width, so he's invisible) that has 100% of the container height.

and with another pseudo element I'm creating a div just after the content div. (also without content, so he's also invisible) that has the clear attribute. so he has to be below the floated one I've created earlier. making the content to go all the way down.