CSS: Making a non-root block element occupy the whole page

Question

Is it possible with only CSS to make a block element occupy the whole page("busy box") when the element is on a non-root level where width and height set to 100% stretch it only as big as the parent element?

I could have done it using absolute size but that would require javascript to adjust to the current size of the page.

This may look like I should have added the element at the root level if I want it to occupy the whole page but I can't modify the master page because we're reusing a standard SharePoint one.

@Edit: For some reason non of the two answers are working for me, must me a CSS quirk, I'll look for the other workaround.

Answer 1

You don't need to find out the current size of the page. Instead, try:

position:absolute;
top:0;
bottom:0;
left:0;
right:0;

Answer 2

What should work is position:fixed. The issue with this is IE6, but there are some solutions: http://www.howtocreate.co.uk/fixedPosition.html . Fixed positioning should take the element out of flow and position it according to the window. For more on positioning: http://www.quirksmode.org/css/position.html

Of course, I'm assuming you want it to take up the whole viewport and stay there, and that whatever you want to display where it is will be within the element itself. Those are a lot of assumptions. As you might guess from the name, fixed positioning sticks the element where you put it--on top of everything else, and it won't move as you scroll.