✔ Höhe 100% und trotzdem Scrollbalken

[xtramen01]

Hallo Leute,

habe ein kleines Problem mit css und containern.

Ich möchte das meine Seite grundsätzlich 100% hoch ist.

Das hab ich auch hinbekommen.
Jetzt habe ich nachträglich einen Headerbereich eingefügt.

Nun ist es so das ich, auch wenn meine Seite keinen Textinhalt hat, scrollen muss. Und zwar genau die Höhe des Headers.

Hat hier jmand eine Lösung wie ich den Header einbinden kann ohne Scrollen zu müssen?

Hier mal der Code:

<div id="container">

  <div id="header">
  header
  </div>      

   <div id="left">
   linke spalte
   </div>        

   <div id="center">
   content
   </div>        

   <div id="right">
   rechte spalte
   </div>        

</div>

Und die dazugehörige CSS Datei:

 HTML, BODY {
      height:100%;
   }
   BODY {
      margin:0;
      padding:0;
      text-align:center;      
   }   
  

   DIV#container {
      position:relative;
      margin:0 auto;
      height:100%;
      width:800px;
   }
   DIV#left, DIV#center, DIV#right {
      position:relative;
      min-height:100%;
      float:left;
      width:200px;       
   }   

   * DIV#left, DIV#center, DIV#right {
     height: 100%;
   }  

   DIV#left {
      background:black;
   }
   DIV#center {
      background:red;
      width:400px;
   }
   DIV#right {
      background:purple;
   }
   

   DIV#header {
      position:relative;
      background:green;
      height:70px;        
	  
   }

Wäre dankbar über jede Hilfe.

Gruss ud schönes Wochenende!

 

[Maik]

Moin,

dein geschildertes Problem wurde hier in den vergangenen Tagen zweimal vorgestellt:

• Divs doppelt so lang!
• Probleme beim Layout

Demnach müssen die height:100%-Angaben der drei inneren Blöcke aus dem Stylesheet entfernt werden, da sie sich weiterhin auf die komplette Fensterhöhe beziehen, und zuzüglich der Höhe des Headers zum Scrollen der inhaltsleeren Seite führt.

Die hier passende Beispielvariante "3cols_header.htm" im Attachment meines Tutorials CSS-Layout mit 100%-Höhe zeigt mit Hilfe der "Faux Columns"-Technik, wie sich die drei Spaltenblöcke unabhängig von ihrem Inhaltsumfang "optisch" bis zum unteren Fensterrand erstrecken.

mfg Maik

 

[xtramen01]

Danke für deine Antwort.

Also deine Version habe ich anfangs auch genutzt.
Da gibt es aber ein Problem mit dem IE6 und IE7.

Wenn ich im center Bereich normalen unformatierten Text habe dann ist alles gut.
Sobald ich aber eine normale Tabelle einfüge mit z.b. 100% Breite verzieht es das ganze Layout und der Centerbreich rutscht unter den linken und rechten.

Lass ich die Breitenangabe weg ists wieder gut.

Hast Du eine Idee?

Gruss

 

[Maik]

Also in meinen Beispielen kann ich in der IE-Familie kein Verziehen des Layouts bzw. Umbruch des mittleren Spaltenblocks #centerCol registrieren, wenn in ihm eine Tabelle mit dem Attribut width="100%" eingebunden ist.

mfg Maik

 

[xtramen01]

Definitiv doch!

Probier das mal aus.

<div id="wrapper" class="clearfix">
     <div id="header">

          <h2>header</h2>
     </div>
     <div id="leftCol">
          {$test_box_tpl}          
     </div>
     <div id="rightCol">
          {$test_box_tpl}          
     </div>
     <div id="centerCol">
     <table border="0" width="100%" cellspacing="0" cellpadding="0">
     <tr>
	 <td>  
          TEST
     </td>
     </tr>
     </table>
     </div>
</div>

Der Centerbereich rutscht im IE unter leftCol und rightCol.
Ich hab das Gefühl das sich die 100% auf wrapper beziehen und nicht auf centerCol.

Eine Idee?

Gruss

EDIT: mit Strict HTML geht es auch im IE mit Transitional leider nicht hab ich grad festgestellt.

 

[Maik]

Tut mir leid


(v.l.n.r.: IE6, IE7)

mfg Maik

 

[xtramen01]

Jou habs grad editiert.

Ich hatte Transitional anstatt Strict verwendet.

Wenn ich das umstelle dann gehts. Is bei mir so. Wies nich warum.

Und is IE8 und nich 7 sorry.

Gruss

 

[Maik]

Dann stellen wir in diesem Fall mal die Reihenfolge der drei Blöcke im Markup um:

<div id="wrapper" class="clearfix">
     <div id="header">...</div>
     <div id="leftCol">...</div>
     <div id="centerCol">
          <table border="1" width="100%" cellspacing="0" cellpadding="0">
                 <tr>
                     <td>TEST</td>
                 </tr>
          </table>
     </div>
     <div id="rightCol">...</div>
</div>

und geben für den mittleren Spaltenblock folgendes an:

div#centerCol {
float:left;
width:400px;
}

mfg Maik

 

[xtramen01]

Ok danke habs nun hin bekommen.

Nun hab ich aber ein neues Problem vielleicht kannst du mir da ja auch ein Tipp geben damit ich keinen neuen thread eröffnen muss.

Ich habe eine Schleife in php.
Jetzt sollen jeweils 3 Container nebeneinander und dann eine neue Zeile mit nochmal 3 usw.

Wie man das in PHP realisert ist klar.
Nur bekomm ich das mit DIVs nicht hin.

Welche Eigenschaften müssten die Container haben das nach dem dritten eine neue zeile mit weiteren 3 COntainern ausgegeben wird.

Mit normalen tabellen hab ich das immer so gelöst:

if($x==1)
    {
    $new_products_modul_string .= '<tr>';
    }
    $new_products_modul_string .= '<td class="smallText" width="33%" valign="top" align="center">test</td>';
   
   if($x==3)
    {
    $new_products_modul_string .= '</tr>';
    $x=0;
    }

Wie kann ich das Beispiel auf DIVs übertragen?

Bin leider CSS Neueinsteiger was COntainer angeht.

Gruss

 

[Maik]

div.box {
float:left;
width:33.3%;
}

... richtet pro Zeile drei DIV-Blöcke mit der Klasse .box nebeneinander aus.

mfg Maik