How to make the height REALLY 100%

Question

Hi, in CSS when you set something's width or height to 100% it really only sets it to 100% of the browser window. Is there any way to make it 100% of the whole page?

Let me rephrase: I want this element (a dic) to take up the ENTIRE page, no matter how much you scroll. Having parent elements with 100% size and 100% width doesn't work because they are treated the same way. I'm beginning to think that I might have to use JS to get the height of the page and then absolutely define that.

Answer 1

When you set the width or height to 100%, it's 100% of the size of it's parent element. So, what you need is an element around all the content of the page, and set the size of a child in that element.

Edit:
If you set the height of the outermost element in the body to 100%, what happens depends on the markup version you are using. In HTML the parent of the body element is the viewport and the height is 100% by default, so your element will be the size of the window. In XHTML the parent of the body element is the html element, and the height of the body element is the height of the actual content in the page.

Answer 2

If it's an overlay, you can consider the following CSS snippet:

#overlay 
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

This presumes that there are other elements on the page to define it's dimensions

Answer 3

100% width will be the width of the browser window if the element is not sized absolutely (e.g. 600px) or contained within another sized element.

The height of the page is determined by how much space the content takes up vertically.

So if you want something to cover a certain amount of space, create an element (i.e. a <div>) that has width and height set in pixels or ems, then the elements inside of it set to 100% will fill to that.

Answer 4

It depends, if you put some element inside a div and table/div's and div's height is let's suppose 500px then the element within it with height 100% will be as much as this div.

If you want make some element fit the whole page, you will have to put it under an element having the actual 100% with of the browser eg this is usually main containing table or parent div.

EDIT:

I have not tried below, but you can also do it this way using absolute positioning:

<style type="text/css">
div
{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
}
</style>

But this approach is not always that ideal. If you are sure, you can implement that :)

Answer 5

Simply apply position:fixed to the element. If this is an overlay:

#overlay 
{
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    height:100%; 
}

Note: fixed is not supported by IE6

Answer 6

I will complete everyones answer....You need to make a style for the body and apply a margin:0; padding:0;

like this:

body{
 margin:0;
 padding:0;
}

after this you can apply a width:100% and a height:100% to every DIV you like.

good luck