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:

<!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" >
    <style type="text/css">
        html, body
            margin: 0px;
<div style="width:100%; height:100%; background-color:Blue;">Div which expands on all the page</div>

No comments:

Post a Comment

your thoughts are welcome:

Need more? Leave comments and subscribe to my blog.