Sacha: Höhe von Tabellenzelle/Layer mit JavaScript bestimmen

Hallo zusammen

Ich habe mir mal ein kleines JavaScript gebastelt, dass beim Aufruf einer Seite die Höhe einer Tabellenzelle und eines Layers auflösungsabhängig bestimmen soll. Der Abstand zum unteren Rand des Anzeigefensters soll stets 20 Pixel betragen.

Hier der Code der Datei:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>SilentWarrior - Home</title>
<meta name="author" content="Sacha">
<meta name="date" content="2002-08-21">
<meta name="robots" content="follow">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="style.css" title="Style-Sheet-Definitionen">
<script type="text/javascript">
<!--
function hoehe()
{
document.getElementById("hauptzelle").height = window.innerHeight - 224;
document.getElementById("hauptlayer").height = window.innerHeight - 226;
}
//-->
</script>
</head>
<body onLoad="hoehe()">
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="border-style:solid; border-width:1px; border-color: #ffffff;"><img src="silentwarrior.gif" width="600" height="150" border="0" alt="SilentWarrior - Links, Downloads, Tutorials und vieles mehr ..." title=""></td>
</tr>
<tr>
<td style="background-color: #6699cc; height:5px;"></td>
</tr>
<tr>
<td style="border-style:solid; border-width:1px; border-color: #ffffff; padding:2px; padding-left:3px; padding-right:3px; padding-top:1px; font-weight:bold;"><a href="index.php" class="nav">Home</a> | <a href="uebermich.php" class="nav">Über mich</a> | <a href="steckbrief.php" class="nav">Steckbrief</a> | <a href="links.php" class="nav">Links</a> | <a href="index.php" class="nav">Downloads</a> | <a href="tutorials.php" class="nav">Tutorials</a> | <a href="feedback.php" class="nav">Feedback</a> | <a href="gaestebuch.php" class="nav">Gästebuch</a></td>
</tr>
<tr>
<td style="background-color: #6699cc; height:5px;"></td>
</tr>
<tr>
<td style="border-style:solid; border-width:1px; border-color: #ffffff; padding:2px; padding-left:3px; padding-right:3px;" id="hauptzelle">
<div style="width:594px; z-index:0; overflow:auto; background-color: #336699;" id="hauptlayer">
<span style="font-size:12pt; font-weight:bold; line-height:15pt;">Hallo, lieber Besucher</span><br>
<br>
<div style="text-align:center; font-style:italic;">Ich weiss zwar nicht, wie du auf meine Homepage kommst, aber ich freue mich trotzdem.</div><br>
So hat einst ein Freund von mir die Besucher auf seiner Website willkommen geheissen. Ich möchte dich hier eben so herzlich begrüssen, wobei ich auf das "trotzdem" doch lieber verzichten würde. <img src="smilies/blink.gif" width="15" height="15" border="0" alt=";-)" title=""><br>
Dies hier ist weder eine Firmenhomepage noch eine Fanhomepage von irgendwas. Es ist lediglich der bescheidene Versuch, meine Wenigkeit im Internet zu präsentieren sowie einige zusätzliche Services für den Besucher (also dich) bereitzuhalten.<br>
<br>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="55%"></td>
<td width="45%">Sacha, Webmaster</td>
</tr>
</table><br>
</div>
</td>
</tr>
</table>
</body>
</html>

Ich hoffe, jemand kann mir helfen bzw. mir erklären, warum es nicht läuft und wie man es besser macht.

Grüsse

Sacha