How to make the height REALLY 100%

Question

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

Let me rephrase: I want this element (div) to occupy the ENTIRE page, no matter how much you scroll. Having parent elements with 100% size and 100% width does not work, because they are processed the same way. I'm starting to think that I may have to use JS to get the page height, and then fully determine it.

Answer 1

Just apply the position: fixed to the element. If it's an overlay:

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

Note: fixed is not supported by IE6

Answer 2

When you set the width or height to 100%, it is 100% of the size of this parent element. So, you need an element around the entire contents of the page and set the size of the child element in this element.

Edit:
If you set the height of the outermost element in the body to 100%, then what happens depends on the version of the markup you are using. In HTML, the parent of the body element is the viewport, and the default height is 100%, 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 on the page.

Answer 3

100% width will be the width of the browser window if the item does not have a size (for example, 600 pixels) or is contained in a different size.

The page height 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. <div> ) that has the width and height specified in pixels or ems, then the elements inside it set to 100% will be filled with what.

Answer 4

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

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

This assumes that the page has other elements for sizing.

Answer 5

It depends, if you put some element inside the div and table / div, and let the height of the div let it be 500px, then the element inside it with a height of 100% will be equal to this div.

If you want some element to fit the whole page, you will have to place it under the element that has the actual 100% of the browser, for example, this is usually the main part of the table or the parent div.

EDIT:

I have not tried below, but you can also do this 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 ideal. If you are sure, you can implement this :)

Answer 6

I will complete all the answers ... You need to create a style for the body and apply margin: 0; upholstery: 0;

like this:

 body{ margin:0; padding:0; } 

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

luck