[Working] 100% Height Divs in ALL browsers.

[cascadingstylez]

Many of you may have searched high and low in order to get your container/wrapper divs to display at 100% height in the browser window. I ran a few tests today for a site im working on, and actually got a method that works.

This method may be floating around on the internet, but i tend to do all my own testing because that way at least you know what your doing works. This method was tested in:

Firefox
IE7
IE6
IE5.5
Opera
Netscape
Konqueror
Safari
IE Mac 5.2
Camino
Shirra
Mozzilla
T-Online

Im not going to paste the source, but you can view it, and view the css at the URI's below:

http://viberate.co.uk/ws/height/withContent.html
http://viberate.co.uk/ws/height/withoutContent.html
http://viberate.co.uk/ws/height/style.css

If you run across any problems, feel free to give me a shout and id be willing to resolve them. I havn't came across any yet.

 

[dan_Vt]

I've wrestled with that issue many times, and finally resorted to handling everything with css, except height and used a table for that.

Thanks for the links.

rep added.

 

[paaaaaaaaaa]

Try re-testing that in IE6. I believe the overall aimed outcome is to always have the grey box fill 100% of the height? If thats the case then it fails in IE6. I would also take a guess that it fails in IE5.x too.

 

[abdussamad]

Try re-testing that in IE6. I believe the overall aimed outcome is to always have the grey box fill 100% of the height? If thats the case then it fails in IE6. I would also take a guess that it fails in IE5.x too.

It looks ok to me in both IE 6 and 5.5 . The only problem is that withoutcontent.html linked above also has content

 

[paaaaaaaaaa]

The aim is to get a container to fill 100% of the browsers window height right? As IE6 and before doesn't support 'min-height' they only take notice of height. Which in this case has been set to auto which will only scale to the size of the text inside.

The withoutcontent page, although with content does not fill 100% of my browser. So the containers height auto adjusts to the height of the content rendering less than the browsers height.