Table overflow working in Chrome and IE but not Firefox
Posted
by
Craig
on Stack Overflow
See other posts from Stack Overflow
or by Craig
Published on 2012-04-05T21:48:30Z
Indexed on
2012/04/06
17:28 UTC
Read the original article
Hit count: 224
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!
© Stack Overflow or respective owner
