CSS 100% Height DIV's tutorial

Many people has this problem when they have create a left navigation bar or left menu, it is difficult to set the height to 100% of the frame.

Most attempts to accomplish this were made by assigning the property and value:

div{height:100%}

- this alone will not work. The reason is that without a parent defined height, the div{height:100%;} has nothing to factor 100% percent of, and will default to a value of div{height:auto;} - auto is an "as needed value" which is governed by the actual content, so that the div{height:100%} will a=only extend as far as the content demands.

The solution to the problem is found by assigning a height value to the parent container, in this case, the body element. Writing your body style to include height 100% supplies the needed value.

body { 
margin:0; 
padding:0; 
height:100%; /* The key line is here */
}

Now when height:100%; is applied to divs (or other elements) contained withing the body, the height percentage has a containing (body) value to work with.

With the above code in, you can set your div's inside the body as 100% height and it will calculate the height relative to the body height.

Hope this helped!