M
markalroberts
Hi,
I am writing an intranet web-application that performs very similarly
to standard forms application.
It all fits on one page (i.e. no scrolling of entire page), with a
fixed header, footer, and dynamically sizable content with two or three
scrollable areas.
Currently it works very well in IE, but I'd quite like to get it to
work in Firefox also.
(One) of the problems i'm encountering is different ways IE and Firefox
seem to treat scrollable divs.
If i've got a div that set to overflow scroll, and is 100% of it's
parent, i'd expect it to start scrolling when the parent wants to
shrink... this is how IE behaves. Unfortunately, I can't get it to work
in Firefox.
Here some very simple HTML that demonstrates:
<html>
<head>
<title>Test page</title>
<style>
body { margin:0; padding:0;}
</style>
</head>
<body>
<table style="width: 100%; height: 100%">
<tr>
<td>
<div style="overflow: scroll; height: 100%; width:
100%">
<table border="1">
<tr>
<td>
Content<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
More content
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Many thanks,
Mark.
I am writing an intranet web-application that performs very similarly
to standard forms application.
It all fits on one page (i.e. no scrolling of entire page), with a
fixed header, footer, and dynamically sizable content with two or three
scrollable areas.
Currently it works very well in IE, but I'd quite like to get it to
work in Firefox also.
(One) of the problems i'm encountering is different ways IE and Firefox
seem to treat scrollable divs.
If i've got a div that set to overflow scroll, and is 100% of it's
parent, i'd expect it to start scrolling when the parent wants to
shrink... this is how IE behaves. Unfortunately, I can't get it to work
in Firefox.
Here some very simple HTML that demonstrates:
<html>
<head>
<title>Test page</title>
<style>
body { margin:0; padding:0;}
</style>
</head>
<body>
<table style="width: 100%; height: 100%">
<tr>
<td>
<div style="overflow: scroll; height: 100%; width:
100%">
<table border="1">
<tr>
<td>
Content<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
More content
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Many thanks,
Mark.