[thelist] interface to take 100% of screen

[Christian Heilmann]

Mark Joslyn wrote:
> 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
>
>
>   
CSS alone would be a pain to do that. With JavaScript it is pretty easy 
though. The YUI has a Dom component that makes it really easy to read 
out viewport sizes and resize elements. If you don't mind it only 
looking perfect with JS, then I can help you there.