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

Question

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

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

The <header> should always fill the whole screen on any height of monitor also in iPad, such that the content of <div id="content"> will only be seen after scrolling, not before that.

possible duplicate of [How to create div to fill all space between header and footer div](http://stackoverflow.com/questions/206652/how-to-create-div-to-fill-all-space-between-header-and-footer-div) — Loktar, Aug 22 '11 at 14:25

score 6 · Accepted Answer · answered Aug 22 '11 at 14:28

6

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

html, body, header {
    height: 100%
}

http://jsfiddle.net/tujsj/

answered Aug 22 '11 at 14:28

Joseph Silber

214,931
59
362
292

@Jitendra Vyas: My solution does exactly that! – Joseph Silber Aug 22 '11 at 14:32
When I try in my layout
only take height upon the elements inside it. not 100%. What wrong I'm doing? I added `html, body, header { height: 100% }` at the bottom of the css
– Jitendra Vyas Aug 22 '11 at 14:40
@Jitendra Vyas: Is your `header` directly under the `body`? If not, then you'll also have to give that other element a `height: 100%`. – Joseph Silber Aug 22 '11 at 14:42
NO I have `Body` > `#container` > `header` > `#header-inner` – Jitendra Vyas Aug 22 '11 at 14:49
@Jitendra Vyas: Then, like I said, you'll have to do `html, body, #container, header { height: 100% }`. – Joseph Silber Aug 22 '11 at 14:50
@JosephSilber let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/2735/discussion-between-jitendra-vyas-and-joseph-silber) – Jitendra Vyas Aug 22 '11 at 14:57
@Jitendra Vyas: Sorry, but that ship has sailed a long time ago. At least for me ;) – Joseph Silber Aug 30 '11 at 13:10

score 4 · Answer 2 · answered Aug 17 '12 at 08:39

4

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

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

answered Aug 17 '12 at 08:39

Dan Dascalescu

143,271
52
317
404

score 2 · Answer 3 · answered Aug 22 '11 at 14:26

2

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());
});

answered Aug 22 '11 at 14:26

box86rowh

3,415
2
26
37

with the css approach, be sure to test on multiple browsers and versions as I have had mixed results with height 100%. – box86rowh Aug 22 '11 at 15:12

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

3 Answers3

Linked