A service from Red Gate

in
Home SQL .NET Exchange Opinion Blogs Forums About
Sign in | Join | Help
Home Blogs Forums
Blogs Home > Damon Armstrong > Almost Properly Set 100% Table Heights Using CSS

Damon Armstrong

Caffeine Induced Tirades about .NET and Life
And don't forget to check out my latest Simple-Talk articles
Add to Technorati Favorites      Add to Google     

Almost Properly Set 100% Table Heights Using CSS

Published Monday, October 02, 2006 12:26 AM

I like making webpages that expand to fill the entire browser window, but ever since browsers started rendering in full-compliance mode it has been a chore because tables do not respond very well to their heights being set to 100% directly in the table tag or using CSS.  I normally just revert back to "quirk" mode by removing the DOCTYPE element from the Visual Studio generated pages to get the table to expand out. 

The following article explains why the tables behave this way and how to get them to expand to a 100% height using valid CSS code.  Very useful stuff, but it still doesn't quite solve my layout issues.  One day though... one day...

http://apptools.com/examples/tableheight.php

by Damon
Filed Under:

Comments

 

Phil Factor said:

It is mighty ingenious, and will help in some circumstances, but, like all things to do with CSS, it aint quite that simple. This solution doesn't give the same effect as 'Quirks mode' once you start pouring content into the table. Try using it and then filling a TD with a scrolling DIV , and pour lots of text into it. Yessir, in quirks mode (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">) it scrolls and stays the same size, whereas in any other mode, the table increases its size beyond the bounds of the browser window.

I try to use XHTML 1.0 where possible, but where one needs to slice up the browser window into areas, using a table, even this ingenious solution doesn't quite work.

I suspect that, after a day, with sandwiches being brought in, one can find a solution that works on all browsers, but it is a struggle.

October 2, 2006 4:27 AM
 

Damon said:

Phil, you're right.  It works to a point, but if you are trying to do a layout then you are going to be in for a suprise.  I tried making a heading row on the table stick to a 75 pixel height and it kept expanding WAY past 75 pixels.  If you fill the table with content then it expands out and looks like it should, but the reason I want it to expand to 100% of the page height is because some pages do not have enough content to fill out the entire page.  

Oh well.  Back to quirks mode for the time being.  Someday I'll find a CSS guru to really explain how to do it.
October 2, 2006 2:17 PM
You need to sign in to comment on this blog
  Opinion Home

  Opinion Pieces (96 articles)

  Geek of the Week (37 articles)

  Tony Davis - Editor (6 articles)

  Phil Factor (41 articles)

  Damon Armstrong (8 articles)

  Douglas Reilly (40 articles)

  Adrian Furnham (1 articles)

  Claire Brooking

  Richard Morris (34 articles)

  Tim Gorman (1 articles)

  Jesse Liberty (5 articles)

  Sarah Blow (1 articles)

  Anna Larjomaa (1 articles)

  Gaidar Magdanurov (2 articles)

  Regular Columnists (1 articles)

  Ben Hall (2 articles)

  Blogs Home
<October 2006>
SuMoTuWeThFrSa
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234
Virtual Exchange Servers
 Microsoft now supports running Exchange Server 2007 in server virtualization environments, not just on... Read more...

Virtualizing Exchange: points for discussion
 With the increasing acceptance of the use of Virtualization as a means of providing server... Read more...

Encouraging .NET Reflector Add-ins
 Jason Haley is well-known for the resources he's provided to developers who wish to extend Reflector's... Read more...

Using .NET Reflector Add-ins
 .NET Reflector by itself is great, but it really comes into its own with the help of some add-ins. Here... Read more...

Unique Experiences!
 You'd have thought that a unique constraint was an easy concept - Not a bit of it; it can cause a lot... Read more...