» » Height 100% does not work

09 March 2011

Height 100% does not work

Height 100% does not work ?

When you put a height for an element inside the page to have 100% of the parent element it does not work?
This is correct.

I have also had this problem and I have found out that this is because when you put 100% it will take 100% of the height of the html document or 100 % of the body.

But in modern browsers html's and body's default height looks to be set to 0 pixels. Which means that their height will be adjusted to the height of inner elements.

So what to do if you want your element to be 100% of the browser window?
ANSWER: make html and body to have height set to 100%, in this case these will take 100% of the window and this way you will be able to set the height for the elements inside html and body needed value in percents.



You can do that using CSS. I have also set margin to 0 pixels so that my page doesn't have any margins, otherwise the page will contain an element with the height of the Client width + margins and this will cause a scrolling bar to appear.

Here is a sample page where I have done this:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <style type="text/css">
        html, body
        {
            height:100%;
            margin: 0px;
        }
    </style>
</head>
<body>
<div style="width:100%; height:100%; background-color:Blue;">Div which expands on all the page</div>
</body>
</html>
Labels: , , ,

No comments:

Post a Comment

your thoughts are welcome:

Subscribe to: Post Comments (Atom)

Need more? Leave comments and subscribe to my blog.

.