Floatende Divs gleich hoch machen
Mit Tabellenlayouts war es recht einfach zwei Spalten gleich hoch werden zu lassen, mitunter sehr problematisch wird das aber bei einem modernen DIV-Layout.
Auf die alte Art, haben unsere zwei Spalten gar keine andere Wahl als gleich hoch zu werden, sie sind über das Tabellengerüst aneinander gekettet:
<table> <tr> <td> ... Ganz viel Text ... </td> <td> .. Wengier Text ..</td> </tr> </table>
Im modernen Box-Layout, sind Tabellen aber tabu, vor Allem wenn es um das Setzen des Layouts, also nicht tabellarischem Inhalt geht:
<div id="main"> <div id="content"> ... Ganz viel Text ... </div> <div id="sidebar"> .. Weniger Text .. </div> </div>
Die Spalte #sidebar würde hier aufhören, sobald ihr Inhalt zu Ende ist, im Vergleich mit der wesentlich längeren Text-Spalte wäre das mittendrin. Damit man sie jetzt dazukriegt gleich zu werden wie ihre benachbarte Spalte, würde man von der Logik her einfach auf height: 100% zurückgreifen. Das funktioniert in diesem Zusammenhang aber nicht.
Die Lösung findet sich im Netz unter dem Namen "Equal Height Columns" und ist vom Prinzip her recht simpel: Man lässt die Spalten extrem lang werden, länger als der Inhalt je sein wird und setzt die beiden in eine Elternbox und sagt dieser sie soll dass, was überfließt verstecken:
#sidebar { padding-bottom: 32768px; margin-bottom: -32768px; float: right; width: 250px; } #content { padding-bottom: 32768px; margin-bottom: -32768px; float: left; width: 520px; } #main { overflow: hidden; height: 100%; /* for IE6 */ }
Der Riesige Innenabstand dehnt die Spalte jetzt ewig weit nach unten, der negative Außenabstand macht jetzt, dass die Spalte regulär jetzt doch wieder da endet wo sie es ohne den padding getan hätte. Übrig bleibt ein optischer Überhang, der einfach vom Eltern-Element mit overflow: hidden versteckt wird.
Kommentare
Great!
Faux-columns usw. hat bei mir nämlich aufgrund der Hintergrundbeschaffenheit nämlich nicht funktioniert.
THX
Smartsoul
Bitteschön, sowas hört man gerne.
Übrigens, hab ich erst kürzlich herausgefunden: damits im IE6 auch funzt dem overflow:hidden div einfach ein height:100% geben.
Super, so einfach habe ich das noch nie erklärt gesehen! Hat mir sehr weitergeholfen. Besonders der Tipp zu IE6 war Gold wert.
Vielen Dank!
Bei mir funktionierts irgentwie nicht.
Meine Seite basiert auf einem 3-Spalten-Layout mit header und footer.
Wo muss dann das overlow: hidden hin?
in etwa so:
<div id="header"></div>
<div style="overflow:hidden">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>
<div id="footer"></div>
Es funktioniert! Super!
Vielen vielen dank!
Du bist echt der beste! =)
Vielen, vielen Dank, hat super funktioniert. Ich liebe Logik!!! :)
Will man den Mantel sowohl um Header als auch Footer fliessen lassen, wird der Footer im Firefox überdeckt.
Einfache Lösung: Man setze position:relative und z-index:1;
#fusszeile {
background-color: darkgreen;
border-top: 1px solid #000080;
padding: 0px;
width: 100%;
clear:both;
position:relative;
}
Nachtrag:
z-index:1 ist überflüssig.
Für maximale Browserkompatibilität:
http://www.positioniseverything.net/articles/onetruelayout/print
Hi,
wollt auch mal meinen Dank ausdrücken. So einfach und so große Wirkung. Also danke für die Info.
Ein einfacher, aber wirkungsvoller Trick. Hat bei mir ohne Probleme funktioniert.
Gibt es auch noch eine ähnlich einfache Lösung, damit die Seite mindestens 100% des Browserfensters groß ist?
Habs doch noch hinbekommen. Dazu einfach in html, body und sämtliche wrapper die Höhe 100% eintragen und die Seite wird so hoch wie gewünscht.
kann es sein, dass dann die Ankerfunktionalität nicht mehr funktioniert? be mir schneidet es dann alles oberhalb ab...
Greeze Jo
VIELEN DANK! Das ist echt genial! ! ! !
Hallo,
erstmal vielen Dank, die Anleitung war echt eine große Hilfe :-)
Hast jemand vielleicht noch einen Tipp, wie ich das auch im Opera hin bekomme? Die Seite wird im Opera leider auf der gesamten Größe von 32K Pixeln dargestellt und hat so natürlich auch entsprechend lange Scrollbars...
Danke im Voraus! :-)
das ist aber leider auch nur eine speziallösung, denn so funktionieren anker nicht mehr.
Hi!
Zwanzig Daumen hoch für diesen Tipp - der ist echt Gold wert. Das wäre einen Flattr wert.
Dann eben hier meinen ergebensten Dank!
Viele Grüße,
Yann.
Dazu fällt mir nur eins ein: ALTER!
Spitze. Wollte aber noch anmerken, dass man damit jeden footer prima ans Ende bekommt ohne footerstickalt und wie das alles heißt! Weiß nicht ob das schon bekannt war, deshalb wollt ich das noch loswerden!
Danke!