Zum Inhalt springen

<div> bis zum seitenende verlänger

Erstellt am 26. November 2005 · 2 Antworten · letzte Antwort am 27. November 2005

Tags: HTML & CSS, Frage

RT-Schwabe ·

Hallo

ich habe ein 3-spaltiges Layout mit <div> erstellt.
Links - Content - Rechts

Wie verlängere ich das Links-div so, dass es bis zum Ende der Seite reicht und somit der Links-div-Hintergrund bis ganz unten reicht?

Meine Versuche mit height:100% und min-height:100% sind leider fehlgeschlagen, da IE und Firefox sich nicht vertragen #angry#

ich hätte einfach gerne 2 graue seitenbalken wie hier auf dieser Seite, beide hören aber je nach Inhalt weiter oben auf....
Muss ich wieder zurück zu Tabellen und den gesamten Content-Bereich inkl. Links und Rechts in eine 3-spaltige Tabelle packen? Dann würden divs ja wieder keinen Sinn machen...

Wer kann helfen?
Hier mein Template:

<div style="width:800px; height:auto; background-color:#ffffff; 
        border-left:1px solid #cccccc;border-right:1px solid #cccccc;
        border-bottom:1px solid #cccccc">

   <div class="MENU_LINKS" style="float:left; display:table-cell;height:100%;
               width:145px; background-color:#eeeeee; border-bottom:1px solid #cccccc; 
               border-right:1px solid #cccccc; padding-top:3px; padding-left:10px;
               text-align:left ">###MENU_LINKS###</div>
   
    <div style="background-color:#ffffff; float:left; width:480px; text-align:left; 
               padding-left:10px;padding-top:10px ">###CONTENT###</div>
   
    <div style="background-color:#ffffff; float:right; width:150px; 
               border-left:1px dotted #cccccc; border-bottom:1px dotted #cccccc; 
               padding-top:3px;text-align:left ">###RECHTS###</div>	
	       <br style="clear:both" />
	
</div>
woida ·

Daß sich die DIVs auf 100% der Höhe strecken geht ohne JavaScript leider nicht, so daß es auch mit allen Browsern funktioniert.
Aber es gibt einen Trick: verwende einfach eine Hintergundgrafik, die links und rechts eine graue Fläche enthält. Die braucht auch nur 1px hoch sein.
Deine DIVs haben keine Hintergrundfarbe. Das hat den gleichen Effekt.
Nachzulesen hier: http://alistapart.com/articles/fauxcolumns/

RT-Schwabe ·

ok, habs nach 2 mal durchlesen kapiert:

Das Background-Image muss über den gesamten Bereich gestaltet werden, also

links - content - rechts

und nicht nur für das betroffene Div. Ist zwar keine sehr schöne Lösung, weils im IE und FF mal wieder unterschiedlich dargestellt wird (weil die Breiten der einzelnen Divs irgendwie nicht gleich interpretiert werden) aber wenigstens eine Lösung...