[Problem] Table 100% - Pagehöhe an Fensterhöhe anpassen

caspah

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

<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&uuml;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&ouml;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 &copy; 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!

sejuma

Zitat

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!).

Also "einen Tod wirst du wohl sterben müssen":
Wenn du Navi und Content in div's packst - ohne Tabellen - passen sich deren Höhen ihrem Inhalt an. Wird dieser "zu hoch" musst du die gesamte Seite scrollen (wo wäre das Problem dabei?)

Gibst du dem div, der Navi und Content beinhaltet eine feste Höhe, so musst du bei Überschreitung dieses Wertes den div scrollen (find' ich weniger ästhetisch, als bei ner gesamten Seite).
Da die Fensterhöhe abhängig von der Auflösung unterschiedlich ist, dein Seiteninhalt aber konstant, führt dies zwangsläufig zum Scrollen - egal nach welcher Methode.
Oder du arbeitest mit overflow: hidden - aber das kann ja auch nicht Sinn der Sache sein, da dann der "überschüssige" Inhalt nicht angezeigt wird.

Mal bildlich dargestellt:
Du hast 10 l Wasser (Inhalt).
Gibst du sie in einen 10l-Eimer (div-Höhe), dann geht's genau rein. Bei kleineren Eimern läuft's über und bei größeren ist noch Platz.

caspah

Hey,
danke erstmal für deine Antwort!
Ehrlich gesagt habe ich mir das schon fast gedacht. Jedoch habe ich gehofft, dass es evtl. doch iiiirgendwie eine Möglichkeit gibt
Ich werde dann wohl meinen Tabellen eine feste Höhe zuweisen und die ganze Page scrollen lassen. Danke auf jeden Fall für die Aufklärung

[Problem] Table 100% - Pagehöhe an Fensterhöhe anpassen

Tags

Benutzer online in diesem Thema