Usable Asp.Net

Little things that make Asp.Net more usable

Table height:100%

Ever tried to get a <table> to take the whole browser height? Not a trivial task if you want to keep the browser in the Strict mode. Yes, removing

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

will do, but that's already the Quirks mode.

This css rule will work even in the Strict mode:

html, body, table#main {height: 100%}

 

Posted: Jan 03 2007, 06:45 AM by egoldin | with 9 comment(s)
Filed under:

Comments

Jorin said:

Thats Awesome!  I've been battling with this forever, and ultimately just threw up my hands and went back to DOCTYPE Transitional 4.0 to make it work.  I prefer this much more!

Any reason why this works?  even though i dont have a table with an id of "main?"

Thanks!

# March 13, 2007 2:49 PM

Kevin said:

html, body, table#main {height: 100%}

you have the body and html tag defined also

# February 21, 2008 6:33 PM

Jay said:

Now it is too big, almost like I set 150%...  Any ideas?

# April 6, 2008 2:40 PM

Juca said:

É, isso funcionou.

# October 22, 2008 11:13 AM

Michael said:

Thanks so much!

# November 4, 2008 6:01 PM

ECerPa said:

Bravo!!!!!!!!!!!!!!!

# November 22, 2008 10:12 PM

Jelgab said:

I put a table inside the page, and it went a little more than the browser's height. In my case, I fixed it removing the margins and reducing a little bit the height percentage:

html,body,table#main

{

 height      : 98%;

 margin-left :  0;

 margin-top  :  0;

}

# January 23, 2009 9:53 AM

Johan said:

dude, you rock .. thanks for the headsup!

# February 26, 2009 6:04 AM

Mayur said:

It is not working in mozilla

Any solution for that ?

# June 20, 2009 3:43 AM
Leave a Comment

(required) 

(required) 

(optional)

(required)