|
|||
Div-Höhe anpassen
Hey Leute,
ich habe das Problem, dass die zwei Div's "text" und "sidebar" im leeren Zustand bereits höher sind als die Seite. Ich hätte gerne, dass beide gleichzeitig und gleichmäßig wachsen, wenn man in eine der beiden einen Text einfügt, der länger als die Seite ist. Sie sollen sich dann aneinander in der Höhe anpassen. Solange der Inhalt der beiden Div's auf der Seite Platz hat, sollen beide die restliche Seite ausfüllen. Könnt ihr mir bei meinem Problem helfen? Grüße bluemle Hier der HTML-Code und der Link zu jsfiddle: HTML-Code:
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html { height: 100%; } body { margin: 0; padding: 0; height: 100%; } #topbar { width: 100%; height: 72px; float: left; background-color: #333333; } #topbar_logo { padding: 10px; float: left; background-color: black; } #topbar_menu { padding: 10px; color: #fdfdfd; } #sidebar { float: left; width: 170px; height:100%; background-color: #666600; } #text { background-color: #ffcc33; height: 100%; } #content { height: 100%; width: 100%; clear:both; } </style> </head> <body> <div id="topbar"> <div id="topbar_logo"> <img style="width: 150px; height: 52px;" alt="" src="logo.png"> </div> <div id="topbar_menu"> <br> </div> </div> <br> <div id="content"> <div id="sidebar"> <br> </div> <div id="text"> <br> </div> </div> </body> </html> |
Sponsored Links |
|
|||
Habe ich das korrekt verstanden, du willst zwei gleich hohe Spalten haben?
Das Problem haben schon viele vor dir gehabt und es gibt einige Lösungsansätze dafür. Falls du IE in alten Versionen nicht unterstützen willst dann nimm die flexbox-Variante. |
Sponsored Links |
|
|||
Danke für die Antwort.
Ich habe mich jetzt für diese Methode entschieden (ähnlich zur Gallagher Methode). Mein Problem ist jetzt noch folgendes. Das "topbar"-div soll eine feste Höhe von 72px haben. Die "sidebar" und "text" divs sollen eine Mindesthöhe besitzen. Und zwar so hoch, dass die restliche Seite ausgefüllt wird. Beide sollen erst wachsen, wenn deren Inhalt die Seite überfüllt. Mit height:100% klappt das leider nicht und man sieht Scrollbalken. Weiß hierzu jemand eine Lösung? |
|
|||
Hallo,
ich würde nicht auf veraltete, komplizierte Lösungen zurückgreifen, sondern zu dem Flexbox-Modell greifen. Damit braucht man auch keine unnötigen Container, nur header (oder nav), main, article und aside. Das könnte zum Beispiel so aussehen: HTML5: bluemle - Gleichhohe Spalten Das entscheidende CSS: Code:
body { height: 100%; min-height: 100vh; display: flex; flex-direction: column; } header { width: 100%; padding: 1%; height: 72px; } main { padding: 0; margin: 0; flex: 1; display: flex; } Code:
body { height: 100%; min-height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } header { width: 100%; padding: 1%; height: 72px; } main { padding: 0; margin: 0; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } MrMurphy |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
DIV Höhe dynamisch anpassen | vaults | CSS | 20 | 26.01.2012 02:05 |
Div Höhe an Inhalt anpassen | prosol | CSS | 4 | 28.03.2011 13:28 |
Div in der Höhe anpassen | cb01 | CSS | 2 | 15.03.2007 04:41 |
div höhe anpassen | Dgx | CSS | 3 | 02.03.2007 19:02 |
höhe eines div tag an ein anderes anpassen | ffr | CSS | 4 | 09.12.2003 17:59 |