Ergebnis 1 bis 3 von 3

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

  1. #1
    HTML Newbie
    Registriert seit
    16.07.2007
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    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

    Code:
    <html>
    <head>
    <title>wip</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/JavaScript">
    <!--
    function MM_swapImgRestore&#40;&#41; &#123; //v3.0
      var i,x,a=document.MM_sr; for&#40;i=0;a&&i<a.length&&&#40;x=a&#91;i&#93;&#41;&&x.oSrc;i++&#41; x.src=x.oSrc;
    &#125;
    
    function MM_preloadImages&#40;&#41; &#123; //v3.0
      var d=document; if&#40;d.images&#41;&#123; if&#40;!d.MM_p&#41; d.MM_p=new Array&#40;&#41;;
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for&#40;i=0; i<a.length; i++&#41;
        if &#40;a&#91;i&#93;.indexOf&#40;"#"&#41;!=0&#41;&#123; d.MM_p&#91;j&#93;=new Image; d.MM_p&#91;j++&#93;.src=a&#91;i&#93;;&#125;&#125;
    &#125;
    
    function MM_findObj&#40;n, d&#41; &#123; //v4.01
      var p,i,x;  if&#40;!d&#41; d=document; if&#40;&#40;p=n.indexOf&#40;"?"&#41;&#41;>0&&parent.frames.length&#41; &#123;
        d=parent.frames&#91;n.substring&#40;p+1&#41;&#93;.document; n=n.substring&#40;0,p&#41;;&#125;
      if&#40;!&#40;x=d&#91;n&#93;&#41;&&d.all&#41; x=d.all&#91;n&#93;; for &#40;i=0;!x&&i<d.forms.length;i++&#41; x=d.forms&#91;i&#93;&#91;n&#93;;
      for&#40;i=0;!x&&d.layers&&i<d.layers.length;i++&#41; x=MM_findObj&#40;n,d.layers&#91;i&#93;.document&#41;;
      if&#40;!x && d.getElementById&#41; x=d.getElementById&#40;n&#41;; return x;
    &#125;
    
    function MM_swapImage&#40;&#41; &#123; //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for&#40;i=0;i<&#40;a.length-2&#41;;i+=3&#41;
       if &#40;&#40;x=MM_findObj&#40;a&#91;i&#93;&#41;&#41;!=null&#41;&#123;document.MM_sr&#91;j++&#93;=x; if&#40;!x.oSrc&#41; x.oSrc=x.src; x.src=a&#91;i+2&#93;;&#125;
    &#125;
    //-->
    </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&#40;'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'&#41;">
    <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">[img]images/buttons/normal/pxa_05.jpg[/img]</td>
    		<td valign="top">[img]images/buttons/normal/pxa_06.jpg[/img]</td>
    		<td colspan="5" valign="top">[img]images/buttons/normal/pxa_07.jpg[/img]</td>
    		<td colspan="2" valign="top">[img]images/buttons/normal/pxa_08.jpg[/img]</td>
    		<td valign="top">[img]images/buttons/normal/pxa_09.jpg[/img]</td>
    		<td valign="top">[img]images/buttons/normal/pxa_10.jpg[/img]</td>
    		<td valign="top">[img]images/buttons/normal/pxa_11.jpg[/img]</td>
    		<td colspan="2" valign="top">[img]images/buttons/normal/pxa_12.jpg[/img]</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">
    		  
    
    Content&#58;</p>
    		  
    
    </p>
    		  
    
    Das gleiche gilt f&uuml;r diese Tabelle... </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">
    		  
    
    Navi Links&#58;</p>
    		  
    
    Diese Tabelle soll sich der Bildschirmh&ouml;he anpassen </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>
    Ich hoffe mal, dass mir jemand bei meinem Problem weiterhelfen kann und ich endlich die Page fertig bekomme
    Vielen Dank schonmal im Voraus!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    16.07.2007
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

Ähnliche Themen

  1. Problem mit table
    Von Rausch im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 06.06.2008, 17:51
  2. Problem mit table
    Von AlexDozer im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 08.02.2008, 15:28
  3. Table-Problem bei IE
    Von rasphilos im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 03.01.2008, 20:26
  4. Table Problem ... ??
    Von Corona.Extra im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 22.01.2006, 19:37
  5. Problem mit <Table>
    Von im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 03.01.2006, 23:04

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •