How To Fill The The Available Height On Screen With The Div For Any Height?

I want to fill the screen (width and height) on any size with a

:

Solution 1:

Simply give your html, body & header a height of 100%:

html, body, header {
    height: 100%
}

http://jsfiddle.net/tujsj/

Solution 2:

You can use the new and so-useful-I-can't-imagine-what-took-W3C-so-long vh CSS unit:

<headerstyle="height: 100vh"></header><divid="content">must scroll to see this</div><footer></footer>

Solution 3:

Have you tried using javascript, specifically jquery to handle this?

If you include jquery in your head tag, then you can use something like this:

$(document).ready(function(){
    $("#header").height($(window).height());
});