Making a div fit the initial screen

Question

I want to make a div fit the initial height and width of a users screen.

I think the following crudely drawn diagram explain this better:

#div {  width: 100%;  height: 100%; } 

does not seem to work

Answer 1

If I understand correctly (there's some room for confusion here):

http://jsfiddle.net/zRpNp/

#screenFiller {     position: absolute;     top: 0; right: 0; bottom: 0; left: 0;     border: 15px solid orange } 

You might be after the position: fixed version: http://jsfiddle.net/zRpNp/1/

Answer 2

Personally I like the pure CSS solution. Just use the vh unit.

#filldiv {     height: 100vh; } 

That will make the div fill the height of the browser window.

In addition, you can also make it fill the width of the browser window, this only uses the vw unit.

#filldiv {     width: 100vw; } 

Both are shown in this fiddle

I personally really like both of these units because they can be used for dynamic resizing of things such as font sizes.