[Working] 100% Height Divs in ALL browsers.

cascadingstylez · 05-24-2007, 01: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
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, 06: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, 09: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, 01:40 PM

Quote:

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, 02: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, 01:45 AM	#1 (permalink)
cascadingstylez Account Closed Join Date: Apr 2007 Location: United Kindom Posts: 201 41.65 NP$ (Donate)	[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 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 01:53 AM.

05-24-2007, 06:48 AM	#2 (permalink)
dan_Vt Senior Member Join Date: Dec 2004 Location: Burlington, Vermont Posts: 1,043 1,086.90 NP$ (Donate)	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 Automotive SEO For Sale: Co-Sign.com \| Skiny.net \| CSIFAQ.com \| FuelBank.net \| Jibbar.com \|

05-24-2007, 09:22 AM	#3 (permalink)
paaaaaaaaaa NamePros Regular Join Date: Mar 2005 Posts: 412 162.25 NP$ (Donate)	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. Ripe Website Manager - Steve Parish

05-24-2007, 02:59 PM	#5 (permalink)
paaaaaaaaaa NamePros Regular Join Date: Mar 2005 Posts: 412 162.25 NP$ (Donate)	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. Ripe Website Manager - Steve Parish

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