[thelist] interface to take 100% of screen

[Mark Joslyn]

Hello Evolt!

Here is my dilemma that I cannot find an answer to:

I need my web application to take up 100% width and 100% height of the
browser window - No scrollbars. I have achieved this by setting the html and
body elements like this:

* { padding: 0; margin: 0; border: none }
html, body { height: 100%; width: 100%; }

The big problem is when I have a nested div like this:

<div id="container">
	<div id="header">Header here</div>
	<div id="left">
		<div id="nestedHeader">Nested header here</div>
		<div id="nestedContent">Nested content here</div>
		<div id="nestedHeader">Nested footer here</div>
	</div>
	<div id="content">Content Here</div>
</div>

Requirements:
1. div.container to take up 100% width & 100% height of the browser window -
NO SCROLLBARS
2. div.left to be 350px wide & 100% height - minus the height of
div.nestedHeader
3. div.nestedHeader to be 100% width of div.left and 20px height
4. div.nestedContent to be 100% width of div.left and 100% height of
div.left (minus the heights of div.nestedHeader and div.nestedFooter) with
overflow set to "scroll"
5. div.nestedFooter to be 100% width of div.left and 20px height AND be
anchored at the bottom of div.left

I have gone through about 200 different attempts (tables, divs, javascript
expressions, etc..) and can not get this to work.

Any insights and help would be appreciated.

Thanks,

MarkJ