Table overflow working in Chrome and IE but not Firefox
- by Craig
I am trying to get a layout that always takes up the entire screen, no more, no less. The layout has a header row, a 200px wide left bar (scrollable), and a scrollable content area.
This works in Chrome and IE, but in Firefox the scroll bars never show nor work. Any thoughts?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
background-color: yellow;
overflow: hidden;
}
#viewTable {
width: 100%;
height: 100%;
background-color: red;
}
#header {
height: 72px;
background-color: blue;
}
#leftcol {
vertical-align: top;
width: 200px;
height: 100%;
background-color: green;
}
#menu {
height: 100%;
overflow: auto;
}
#rightcol {
vertical-align: top;
width: auto;
height: 100%;
background-color: purple;
}
#content {
height: 100%;
overflow: auto;
}
</style>
</head>
<body>
</body>
<table id="viewTable" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" id="header">
Header
</td>
</tr>
<tr>
<td id="leftcol">
<div id="menu">
0<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
100<br/>
</div>
</td>
<td id="rightcol">
<div id="content">
0<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
100<br/>
</div>
</td>
</tr>
</table>
hi
</html>
I would have preferred to use CSS, but could not find any way to do it.
The hi should no show, it is simply there to verify it does not.
Thank you!
