Making a div fit the initial screen

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/

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.

Related