Hallo zusammen,
ich sitze zwar nicht an meiner ersten Homepage, jedoch habe ich hier ein Problem, welches mich noch zur Verfweiflung treibt. Ich hoffe daher mal, dass ihr mir weiterhelfen könnt
Und zwar habe ich hier folgendes Problem…
Ich habe eine Seite, welche sich in der Höhe dem Bildschirm des Users anpassen soll.
Die Seite besteht aus Tabellen und ich habe einen Header, welcher eine fixe Höhe hat und einen Footer, welcher ebenfalls eine fixe Höhe hat.
Jetzt möchte ich, dass die Tabellen in der Mitte, in welchen der Content soll, sich entsprechend anpassen, so dass die Seite immer über die gesamte Fensterhöhe geht (ohne dabei zu groß zu werden, so dass man scrollen muss!).
Ich habe es schon mit CSS versucht und einen Container gebaut, welcher 100% height hat und overflow:auto, aber irgendwie führt das trotzdem nicht zum gewünschten Ergebnis. Entweder ist die Tabelle zu klein wenn sich darin zu wenig Inhalt befindet und zereisst mir somit mein Design, oder sie wird zu groß und ich muss wieder scrollen.
Ich poste am besten mal meinen Code, dann seht ihr ja was ich meine
<html>
<head>
<title>wip</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body bgcolor="#EBFCCF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/buttons/hover/pxa_05.jpg','images/buttons/hover/pxa_06.jpg','images/buttons/hover/pxa_07.jpg','images/buttons/hover/pxa_08.jpg','images/buttons/hover/pxa_09.jpg','images/buttons/hover/pxa_10.jpg','images/buttons/hover/pxa_11.jpg','images/buttons/hover/pxa_12.jpg')">
<table width="980" height="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="body">
<tr>
<td height="580" valign="top" rowspan="7" bgcolor="EBFCCF"></td>
<td colspan="10" valign="top">
[img]images/pxa_02.jpg[/img]</td>
<td colspan="6" valign="top">
[img]images/pxa_03.jpg[/img]</td>
<td height="580" rowspan="7" bgcolor="EBFCCF" valign="top"></td>
</tr>
<tr>
<td colspan="3" valign="top">[url='xxx.html'][img]images/buttons/normal/pxa_05.jpg[/img][/url]</td>
<td valign="top">[url='xxx.html'][img]images/buttons/normal/pxa_06.jpg[/img][/url]</td>
<td colspan="5" valign="top">[url='xxx.html'][img]images/buttons/normal/pxa_07.jpg[/img][/url]</td>
<td colspan="2" valign="top">[url='xxx.html'][img]images/buttons/normal/pxa_08.jpg[/img][/url]</td>
<td valign="top">[url='xxx.html'][img]images/buttons/normal/pxa_09.jpg[/img][/url]</td>
<td valign="top">[url='xxx.html'][img]images/buttons/normal/pxa_10.jpg[/img][/url]</td>
<td valign="top">[url='xxx.html'][img]images/buttons/normal/pxa_11.jpg[/img][/url]</td>
<td colspan="2" valign="top">[url='xxx.html'][img]images/buttons/normal/pxa_12.jpg[/img][/url]</td>
</tr>
<tr>
<td colspan="16" valign="top">
[img]images/pxa_13.jpg[/img]</td>
</tr>
<tr>
<td colspan="2" valign="top" background="images/pxa_14.jpg"></td>
<td height="25" colspan="4" valign="top">[img]images/pxa_15.jpg[/img]</td>
<td colspan="2" rowspan="2" background="images/pxa_16.jpg" valign="top"></td>
<td colspan="7" rowspan="2" align="center" valign="top" bgcolor="#FFFFFF"><div id="contentbox">
[b]Content:[/b]</p>
</p>
[b]Das gleiche gilt für diese Tabelle... [/b]</p>
</p>
</p>
</div></td>
<td rowspan="2" background="images/pxa_18.jpg" valign="top"></td>
</tr>
<tr>
<td colspan="2" valign="top" background="images/pxa_19.jpg"></td>
<td colspan="3" align="center" valign="top" bgcolor="#FFFFFF"><div id="contentbox-links">
[b]Navi Links:[/b]</p>
[b]Diese Tabelle soll sich der Bildschirmhöhe anpassen [/b]</p>
</p>
</div></td>
<td background="images/pxa_21.jpg" valign="top"></td>
</tr>
<tr>
<td valign="top">
[img]images/pxa_22.jpg[/img]</td>
<td valign="top">
[img]images/pxa_23.jpg[/img]</td>
<td colspan="3" valign="top">
[img]images/pxa_24.jpg[/img]</td>
<td valign="top">
[img]images/pxa_25.jpg[/img]</td>
<td valign="top">
[img]images/pxa_26.jpg[/img]</td>
<td valign="top">
[img]images/pxa_27.jpg[/img]</td>
<td colspan="7" valign="top">
[img]images/pxa_28.jpg[/img]</td>
<td valign="top">
[img]images/pxa_29.jpg[/img]</td>
</tr>
<tr>
<td height="27" colspan="16" background="images/pxa_30.jpg" valign="top"><div id="footer">copyright © 2007 by xXx </div></td>
</tr>
<tr>
<td valign="top">
[img]images/spacer.gif[/img]</td>
<td valign="top">
[img]images/spacer.gif[/img]</td>
<td valign="top">
[img]images/spacer.gif[/img]</td>
<td valign="top">
[img]images/spacer.gif[/img]</td>
<td valign="top">
[img]images/spacer.gif[/img]</td>
<td valign="top">
[img]images/spacer.gif[/img]</td>
<td valign="top">
[img]images/spacer.gif[/img]</td>
<td valign="top">
[img]images/spacer.gif[/img]</td>
<td valign="top">
[img]images/spacer.gif[/img]</td>
<td valign="top">
[img]images/spacer.gif[/img]</td>
<td valign="top">
[img]images/spacer.gif[/img]</td>
<td valign="top">
[img]images/spacer.gif[/img]</td>
<td valign="top">
[img]images/spacer.gif[/img]</td>
<td valign="top">
[img]images/spacer.gif[/img]</td>
<td valign="top">
[img]images/spacer.gif[/img]</td>
<td valign="top">
[img]images/spacer.gif[/img]</td>
<td valign="top">
[img]images/spacer.gif[/img]</td>
<td valign="top">
[img]images/spacer.gif[/img]</td>
</tr>
</table>
</body>
</html>
Alles anzeigen
Ich hoffe mal, dass mir jemand bei meinem Problem weiterhelfen kann und ich endlich die Page fertig bekomme
Vielen Dank schonmal im Voraus!