Hi,
I am trying to build one HTML page with a table occupying the entire
page and having two rows. The upper row contains data, while the lower
row contains two buttons.
My problem is: I want the lower row to always stay 60 pixels height,
while the upper row taking the rest of the page. And at the same time,
when the upper row contains a large text, a scroll bar in the right
part to show up.
What I succeeded in doing so far was to have a relative dimension for
the lower row (20%), but not a fixed one.
Also, this code works only for Mozilla, while for IE, I need to change
the div's style's height to 100%.
Here's the code:
<html>
<body style="height:100%; margin: 0px; padding: 0px; overflow:hidden;">
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr height="80%">
<td>
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td>
<div style="position:absolute; top: 0px; bottom: 68px; width:
100%; height:80%; overflow: auto;">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br> a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br> a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br> a<br>a<br>a<br>a<br>a<br>a<br>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr height="1px">
<td valign="top" style="background-color:#ff0000" height="1px"/>
</tr>
<tr>
<td align="right">
<input type="button" value="hello1"> <input type="button"
value="hello2">
</td>
</tr>
</table>
</body>
</html>
Do you know how can I convince Mozilla to put a scrollbar in the upper
row and still keep the lower row at a fixed height? And how can I make
this code work for both Mozilla and IE?
Thanks,
Marius
