How to fill the available screen height with a div for any height?

Question

I want to fill the screen (width and height) of any size with <header> :

 <header></header> <div id="content"></div> <footer></footer> 

<header> should always fill the entire screen at any height of the monitor also on the iPad, so that the content <div id="content"> will be displayed only after scrolling, and not earlier.

Answer 1

Just specify html , body and header height of 100%:

 html, body, header { height: 100% } 

http://jsfiddle.net/tujsj/

Answer 2

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

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

Answer 3

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

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

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