By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,070 Members | 1,238 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,070 IT Pros & Developers. It's quick & easy.

table relative and fixed dimensions

P: n/a
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
Share this Question
Share on Google+
1 Reply


P: n/a
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.