100% table using CSS without table

I try to replace an table with only CSS but get stucked in 100% height

[StibPelle]

Hi, any one that can help med?
I have these "demands" for the soloution.
* Will be 100% width and height to fill upp all body
* Will work crossbrowser in the new (IS5/Moz etc)
* Will remain 100% width/height on resized window.
* Page never scrollable

Here is my simplified table
<table height=100%" width="100%">
<tr height=100" width="100%">
<td colspan="3" id="Header" height=100" width="100%">
</tr>
<tr height=100%" width="100%">
<td id="Menu" height=100%" width="200">
<td id="Tabb" height=100%" width="10">
<td id="Content" height=100%" width="100%" style="overflow: auto;">
</tr>
<tr height=100" width="100%">
<td colspan="3" id="Footer" height=100" width="100%">
</tr>
</table>

If I try to explain, I have an table creating my Header, Content, Menu and Footer. The Footer are absolute bottom and fixed height. The Header are absolute top and fixed height. The Menu are absolute under the header and fixed width and dynamic height to fill the gap between header and footer. The Content are absolute under the header and beside the menu, dynamic width and height to fill the gap between header/footer and Menu/rightmargin.

Any one? Free beer or similar for the soloution ;)

[DrDoc]

Welcome to WebmasterWorld!

*bump* Anyone? ;)

[StupidScript]

There is no "height" attribute in the HTML specifications for tables. As such, it is not supported. It is generally left to the browser to render the actual height of a table, according to its contents.

For Netscape: Using Javascript, you can "measure" the outerHeight of the browser window, guess at the width of the scrollbars and whether the status bar is turned on, and then set the "100%" height value to the result as the page is being loaded.

For Internet Explorer: Using Javascript, you can wait until the page loads, and then measure the browser window's innerHeight to get your measurement.

With either browser: Using Javascript you can open a separate window with known dimensions and load your fixed-size table into that, using its height value.

There are not many choices for this task. There are not ANY choices that do not involve Javascript, JS/CSS or framesets.

Good luck!

[createErrorMsg]

Is there a class somewhere that has assigned this problem as a final exam or something? You are literally the fourth person in two days who has posed this very problem.

Thus far, no one had volunteered an answer.

Personally, I'm hung up on imagining a situation where meeting these criteria would even be desireable. What's the page you're making for?

[knighty]

big big disadvantage of CSS, with tables you can easily set up a footer at the bottom of every page.

With CSS you cannot do it without a load of hacks :(

[SuzyUK]

Try msg#7 [webmasterworld.com] in this thread..

disclaimer:
you can't use the mouse scroll wheel and it doesn't work in IE/Mac

also in that message it was for one center column but it can be split into as many columns as you like...

Suzy