G
Geoff Smith
This may be over ambitious but I wish to create a div that is sized and
positioned relative to the page. Then within that div I want a header
and footer and between them another div with content that displays a
scroll bar when necessary. The header and footer will be of a fixed size
the content will take the remainder of the space.
I have something that works in IE6.0 but it doesn't in Mozilla (Firebird
0.6.1)
If you have a look at the code below in IE6 and mess around with the
window size you will see what I'm trying to acheive - but Mozilla
doesn't contain the size of the content area.
Is this a bug in Mozilla or IE doing things that are no standard?
Is there a way I can get the IE behaviour across all (well most)
browsers?
<html>
<body>
<div style="position: absolute; left:10%; top:10%; width:80%;
height:80%;">
<table width="100%" height="100%" border="1" cellspacing="0"
cellpadding="2">
<tr>
<td height="5%">header</td>
</tr>
<tr>
<td height="90%">
<div style="position: relative; overflow: auto; left: 0px; top:
0px; height: 100%; width: 100%; background-color: #FFFFCC; border: 1px
solid #000000; ">
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
</div>
</td>
</tr>
<tr>
<td height="5%">footer</td>
</tr>
</table>
</div>
</body>
</html>
positioned relative to the page. Then within that div I want a header
and footer and between them another div with content that displays a
scroll bar when necessary. The header and footer will be of a fixed size
the content will take the remainder of the space.
I have something that works in IE6.0 but it doesn't in Mozilla (Firebird
0.6.1)
If you have a look at the code below in IE6 and mess around with the
window size you will see what I'm trying to acheive - but Mozilla
doesn't contain the size of the content area.
Is this a bug in Mozilla or IE doing things that are no standard?
Is there a way I can get the IE behaviour across all (well most)
browsers?
<html>
<body>
<div style="position: absolute; left:10%; top:10%; width:80%;
height:80%;">
<table width="100%" height="100%" border="1" cellspacing="0"
cellpadding="2">
<tr>
<td height="5%">header</td>
</tr>
<tr>
<td height="90%">
<div style="position: relative; overflow: auto; left: 0px; top:
0px; height: 100%; width: 100%; background-color: #FFFFCC; border: 1px
solid #000000; ">
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
content rfger gerg etg et ert ewrewr ytew rtg er yter r yt er
tgew ryt er tgw retg r ytewr wrt ewrtg ewryt ewrg
</div>
</td>
</tr>
<tr>
<td height="5%">footer</td>
</tr>
</table>
</div>
</body>
</html>