July 27, 2008

100% Height Divs

It is rare that I need to have a div fill the whole height of the window, but in my SN Project Website I thought that this would look rather nice, the problem is that if you just put "height: 100%; " in the css it does not work. This is because all parent divs must also have 100% height set, which makes sense after you finally are told this fact. So in order for you to have a 100% height div, you must first set the html and body to 100% then all other parent divs as well. See example below...


html, body
{
height: 100%;
}

div.content...
{
height: 100%;
min-height: 600px; /* I like 600 you can use any number */

}


UPDATE: You should also set a min height for your content divs, this will allow the page to stop only being 100% height and get smaller and scroll when the page size is reduced below that number.

Also, it makes the process a lot simpler to only use cascading inclosing divs, avoid any buggy fancy positioning, because this may break things. I am happy with the results, and to my supprise it worked with no issues in Saffari, Camino/FFox and IE 7.

No comments: