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

















<October 2006>
SuMoTuWeThFrSa
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234
A SysAdmin's Guide to Change Management
 In the first in a series of monthly articles, ‘Confessions of a Sys Admin’, Matt describes the issues... Read more...

Exchange: Recovery Storage Groups
 It can happen at any time: You get a request, as Admin, from your company, to provide the contents of... Read more...

Build Your Own Virtualized Test Lab
 Desmon explains the fundamentals of building a test lab for Windows servers and Enterprise applications... Read more...

Rendering Hierarchical Data with the Treeview
 It sometimes happens that Web Server controls that visualize data don't quite fit with the way that... Read more...

SQL Server 2008: Performance Data Collector
 With Performance Data Collector in SQL Server 2008, you can now store performance data from a number of... Read more...