We help IT Professionals succeed at work.

Exact/percentage row heights

Peter Monk
Peter Monk asked
on
Howdy all,

I'm trying to display a table with three rows.

The top and bottom rows have fixed heights but the
middle row I would like to expand to fill up the
available screen height.

I have this (kind-of) code for the table:

<table height="100%">
<tr height="24">
...
<tr height="100%">
...
<tr height="24">
</table>

I know 100% probably isn't the best thing to put
for the middle row (seeing as, technically, it's
not really 100% but 100%-48) but I can't think of
what else to use.

IE 5.01/5.5 displays it with no problems.
Netscape 6.01 and IE 4.01 share the same problem:
they seem to divide up the table equally, so that
all three rows have the same height.

Now: WTF???  I've specified exact heights for two
of the rows and NS6/IE4 is ignoring it.

Any ideas would be appreciated.

Thanks!

Peter.
Comment
Watch Question

Commented:
Plz,check this code:
---------------------start---------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Author" content="???<(AMTD)">
<meta name="Keywords" content="good,key,VB,program,download,soft,sex,eroticism">
<meta name="Description" content="http://www.vbgood.com,http://www.cnpep.com">
<link rel="stylesheet" type="text/css" href="include/style.css">
<title> Title </title>
</head>
<body topmargin="0" leftmargin="0">
<table height="24" border="1">
<tr>
     <td>page header</td>
</tr>
</table>
<table id="maintable" border="1">
<tr>
     <td>1</td>
     <td>2</td>
</tr>
<tr>
     <td>3</td>
     <td>4</td>
</tr>
</table>
<table height="24" border="1">
<tr>
     <td>page foot</td>
</tr>
</table>
<script language="JavaScript">
<!--
window.maintable.height=document.body.clientHeight-48-10;
//-->
</script>
</body>
</html>
-------------------end-----------------------
Peter MonkWeb and IT developer

Author

Commented:
Hi AMTD,

Thanks for your post.
The code you posted was helpful.  The page now looks fine
under IE 4, which it didn't before.  However, Netscape
still renders the page incorrectly.

I've changed the code from one table with three rows to
three separate tables, the middle one being the 'maintable'.

Here's the jist of it:

<table class="nav" width="220" height="24" cellpadding="0" cellspacing="0">
  <tr height="100%">
    <td class="aquaback" width="210" style="padding-top:2px;padding-left:8px">
    ...stuff...
    </td>
    <td width="10" class="aquaback">&nbsp;</td>
  </tr>
</table>

<table class="nav" id="maintable" width="220" cellpadding="0" cellspacing="0">
  <tr height="100%">
    <td width="210" style="padding-top:0.5em;padding-left:0.22em;vertical-align:top">
    ...stuff...
    </td>
    <td width="10" class="aquaback">&nbsp;</td>
  </tr>
</table>

<table class="nav" width="220" height="24" cellpadding="0" cellspacing="0">
  <tr height="100%">
    <td class="aquaback" width="220" style="padding-top:2px;padding-left:8px">
    ...stuff...
    </td>
    <td width="10" class="aquaback">&nbsp;</td>
  </tr>
</table>

<script language="JavaScript">
<!--
  window.maintable.height = document.body.clientHeight - 48;
//-->
</script>


Netscape seems to ignore the height specified - it only
renders the middle table as high as is required to fit it's contents in, as opposed to the full height of the
screen.

Any further comments would be appreciated!

Peter.

Commented:
sorry,I have not NC in my computer.
pmonk > The problem you are having with Netscape is that you are mixing percentages and fixed heights...Netscape is a pain in the **S when it comes to table heights and widths that are mixed....

When you have a problem like that...strip either the percentages or the fixed heigths and try again...I understand that in this case that will be hard...

But in case you need to have the middle row stretch, you can do so using javascript, calculate the availableHeight and substact the heights allready given to the other cells...

Max.

Commented:

Commented:
pmonk has requested a split and I have accepted the first part.

I will now create a question for DreamMaster in this TA for his share.

Best regards,
ComTech
Community Support Moderator

Explore More ContentExplore courses, solutions, and other research materials related to this topic.