Forum Moderators: not2easy
Hope one of you guys can help me, I have a TABLE layout, 4 rows, head, menu, content, foot.
In the content I have a DIV, set to 100% height which I intend to use as a scroll wrapper, however in IE it fills the height, but FF ignores height and overflow.
Basic code is pretty much as you'd expect:
* { margin: 0; padding: 0; }
HTML, BODY { height: 100%; }
TABLE { width: 100%; height: 100%; }
.row1 { height: 100px; }
.row2 { height: 3em; }
.row4 { height: 9%; }
.scroll { height: 100%; overflow: auto; }
DOCTYPE strict
<table>
<tr class='row1'><td>Header</td></tr>
<tr class='row2'><td>Menu</td></tr>
<tr><td><div class='scroll'>Content?</div></td></tr>
<tr class='row4'><td>Footer</td></tr>
</table>
Any ideas?
[edited by: SuzyUK at 6:07 pm (utc) on Mar. 30, 2007]
[edit reason] Please no URI's per TOS #13 [WebmasterWorld.com] [/edit]
There have been many threads in browsers about this problem of trying to get one row to take up remaining height.. try a search [google.com]
that aside you have the scrolling div in a cell with no height set on it, so the inheritance chain is technically broken so a solution which involves JS to compute the heights might be one choice.
CSS and Absolute Positioning actually lends itself to this purpose nicely,
BUT this time IE is the problem again, only IE7 can cope :o IE6 and below still need some kind of Dynamic expression to find the height (so JS is still required for back compat).
here's a sample with CSS, basically compliant browsers can use all four positioning co-ordinates to find top, right bottom & left positions, but IE6 and below can only use left or right with top or bottom so it needs both width and height calculated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css" media="screen">
html, body { height: 100%; margin: 0; padding: 0; }
body {font: 14px arial, sans-serif;}
p {margin: 1em 0;}
#row1 {background: #abc; height: 100px; }
#row2 {background: #fff; height: 3em; }
#row3 {
background: #ffc;
position: absolute;
margin-top: 100px; /* header height */
top: 3em; /* menu height */
bottom: 9%; /* footer height */
left: 0;
right: 0; /* right not read by IE6 and below so width needs set */
overflow: auto;
}
#row4 {
background: #abc;
height: 9%;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
<!--[if lt IE 7]>
<style type="text/css" media="screen">
/* height DHTML expression for IE6 and below */
#row3 {
width: 100%;
/* calculation = the height of the body and subtract the other 3 rows */
height:expression(document.body.clientHeight - row1.offsetHeight - row2.offsetHeight - row4.offsetHeight + "px");
}
</style>
<![endif]-->
</head>
<body>
<div id="row1">Header</div>
<div id="row2">Menu</div>
<div id="row3"> Content.. add favourite foo text here</div>
<div id="row4">Footer</div>
</body>
</html>
that aside you have the scrolling div in a cell with no height set on it, so the inheritance chain is technically broken so a solution which involves JS to compute the heights might be one choice.
I think you have hit the nail on the head here, I tried it with TD heights set in the CSS to match and FF works ok.
I have written a JS that allows the use of a TR with undefined height to take remainder of space. It's a little gem. However I modified the script to also set the heights of all child TD's the same, but FF does not adjust the height of the inner DIV.
Hence my other post regarding FF's getcomputedstyle px/% thing. The next step would be to set the DIV height myself too.
Have now fixed JS and works OK. The TD height inheritance seemed to be the problem as suggested.
Thanks for the pointer!
