[Working] 100% Height Divs in ALL browsers.

cascadingstylez · 05-24-2007, 02:45 AM

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
????: NamePros.com http://www.namepros.com/programming/331395-working-100-height-divs-all-browsers.html
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 · 05-24-2007, 07:48 AM

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 · 05-24-2007, 10:22 AM

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 · 05-24-2007, 02:40 PM

Originally Posted by 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.

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 · 05-24-2007, 03:59 PM

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.

05-24-2007, 02:45 AM	THREAD STARTER #1 (permalink)
cascadingstylez Account Closed Join Date: Apr 2007 Location: United Kindom Posts: 201	[Working] 100% Height Divs in ALL browsers. 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 ????: NamePros.com http://www.namepros.com/programming/331395-working-100-height-divs-all-browsers.html 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. Last edited by cascadingstylez; 05-24-2007 at 02:53 AM.

05-24-2007, 07:48 AM	#2 (permalink)
dan_Vt Senior Member Join Date: Dec 2004 Location: Burlington, Vermont Posts: 1,048	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. __________________ Vermont SEO Tool Band Forum For Sale: Co-Sign.com

05-24-2007, 10:22 AM	#3 (permalink)
paaaaaaaaaa NamePros Regular Join Date: Mar 2005 Posts: 442	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. __________________ Please add to my rep points if i was helpful. Thanks. Content management system and online shop software

05-24-2007, 03:59 PM	#5 (permalink)
paaaaaaaaaa NamePros Regular Join Date: Mar 2005 Posts: 442	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. __________________ Please add to my rep points if i was helpful. Thanks. Content management system and online shop software

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)