I have a page that works as I intend in IE but not in Firefox:
<html>
<head>
<title>Overflow Test</title>
</head>
<body style='overflow:hidden; margin:0; padding:0;'>
<table border='0' cellpadding='0' cellspacing='0'
style='border-collapse:collapse; width:100%; height:100%;'>
<tr><td colspan='2' style='height:3em; border-bottom:1px solid
#666666; font-size:20pt;'>Caption Here</td></tr>
<tr>
<td style='width:16em; border-right:1px solid #666666'>Navigation
Bar Here</td>
<td>
<div id='scrollingPane' style='overflow:auto; width:100%;
height:100%; padding:.5em .5em .5em .5em;'>
Line 01<br>
Line 02<br>
Line 03<br>
Line 04<br>
... lots more lines<br>
</div>
</td>
</tr>
</table>
</body>
</html>
Basically, the top level table should always cover the whole viewport
(<body>) which has overflow hidden - ie: it should never have a
scrollbar but should not clip anything unless the browser window is
resized to a very small window. The top bar will have a fixed height
and it's width will always occupy the whole width of the viewport. The
nav bar on the left will have a fixed width but it's height will occupy
what's left of the viewport after the top bar is rendered. The
scrollingPane area will occupy the rest and have a scrollbar if it
needs to.
The problem is the overflow:auto on the div with the id 'scrollingPane'
does not work. After some research, I found out that this is because
the width and height properties are this div is reverting back to auto
because it's parent does not have a width and height property.
Unfortunately, I can't figure out what value to put on this property.
"100%" will not work because it means "have the same width as the
containing element". What I need is to be able to set the width/height
to a value that says "occupy the width (or height) that is left after
all the siblings within this block have been sized".
How can I achieve this?