Hi,
I'm trying to create the following structure:
header
body
...where the header is fixed, and the body is scrollable. The body
should resize to fill the available space. I'm trying to do it all
using HTML + CSS without javascript.
This is possible in IE apparently because IE treats 100% height incorrectly:
table {
height:100%;
}
#headerRow {
height: 1%;
}
#bodyDiv {
overflow:auto;
height:100%;
}
<table>
<tr id="headerRow">
<td>Header</td>
</tr>
<tr>
<td>
<div id="bodyDiv">Body</div>
</td>
</tr>
</table>
Here the headerRow will grow to be as big as its contents because it
has a height of 1%. The table will be as big as the viewport (height
100%) and the bodyDiv will grow or shrink to whatever space is left
and provide scrollbars when needed.
This doesn't work in Firefox or apparently IE in standards compliance
mode, as at some point an actual height value needs to be supplied to
contstrain the percentage heights, otherwise the table will just grow
past the viewport height. The only way I can see to get and actual
height value is to use javascript - is this the case?
If I could get this to work with a tableless design and only css that
would be great, eg:
<div id="header">Header</div>
<div id="body">Body</div>
What css can you use to make #'body grow to fill the screen and
provide scrollbars when it's contents exceed it's boundaries?
thanks
andrew
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
