2009-07-30

Table height = Browser window height WITHOUT quirks mode!

In spite of all the CSS hype, I still occasionally like to use tables to lay out a page. I think there are some layout situations where a table lets you do things CSS layouts don't.

For a long time, I've been despairing about the apparent impossibility of getting a page to fill the browser screen, or a known proportion of it, independently of the user's browser window size and without using JavaScript.

It used to be that a table at 100% height would fill the screen vertically. However, this was a "feature" of the so-called "quirks mode." If you build a Web page with a "proper" DOCTYPE, you hint to the browser that you know how to build standards compliant Web pages, and in return it renders your page more or less rigidly according to the standard.

This is very thoroughly explained by Gary White on the AppTools site .

The good news is, there's a standard compliant workaround. You can use CSS to set the height of the <html> and <body> elements of the page to 100%; their parent is the screen, so they will. Then you can use CSS to set the height of your table to 100%, and it will fill your screen.

No comments: