468,780 Members | 2,337 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,780 developers. It's quick & easy.

table relative and fixed dimensions

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">&nbsp;<input type="button"
value="hello2">&nbsp;
</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

Jul 21 '05 #1
1 4051
Hi,
ha******@gmail.com wrote:
[...]
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?


try to set also <html> to height:100%. The Scrollbar should be set with
overflow:scroll.
http://www.w3.org/TR/CSS21/visufx.ht...rflow-clipping
Chris
Jul 21 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Greg | last post: by
9 posts views Thread by PeteCresswell | last post: by
2 posts views Thread by dfdavis.mtu | last post: by
1 post views Thread by CARIGAR | last post: by
2 posts views Thread by Marin | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.