• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Divgröße synchron halten, trotz anderen Inhalt

K

Kazel

Neues Mitglied
Hallo CSS'ler!

Ich habe theoretisch zwei Divs, die allerdings KEINE feste Größe haben,
da ich ja flexibel sein möchte, und diese zwei Divs sollen trotz unterschiedlichen Inhalt immer gleich lang sein.

Ohne eine feste Größe ist das Div natürlich so groß wie viel Platz der Text in Anspruch nimmt,
doch wie erwähnt möchte ich flexibel bleiben und hierbei ohne feste Größe arbeiten.

Das rechte Div hat also aufgrund des Textes eine gewisse Größe und das linke Div,
nennen wir es in diesem Fall Sidebar, soll sich der länge des Rechten anpassen.

Im Anhang eine Grafik, die hoffentlich genauer klarstellt, was ich möchte,
da ich sau schlicht in Sachen erklären bin. :p
 

Anhänge

  • htmlde.jpg
    htmlde.jpg
    22,5 KB · Aufrufe: 10
Oder beide absolut positionieren und height: 100%; geben (inkl. Elternelement).

Ist allerdings alles sehr umständlich und dirty. Würde ich mMn so nicht umsetzen :)
 
Im Grunde genommen sind alle Lösungen unsauber und problembehaftet. Man könnte sicher auch einen Weg über display: table gehen.

Für den klassischen Fall "3 Boxen nebeneinander mit flexibler Textmenge und Background-color" bevorzuge ich jedoch die JS-Lösung. Alles andere produziert meiner Meinung nach viel zu viel Folgeprobleme, grade bei größeren Projekten. Für kleinere Seiten ohne CMS mag eine reine CSS-Lösung funktionieren, aber sobald eine gewissen Flexibilität auch bei der Anordnung von Elementen gefordert ist, stößt man an Grenzen.
Deshalb die JS-Lösung, das ist mit ein paar Zeilen erledigt, man ist recht flexibel, es gibt keine CrossBrowser-Issues und man verbaut sich nichts durch abenteuerliche CSS-Konstruktionen
 
Sagte ich ja. Deswegen würde ich es so auch nicht umsetzen :P
Gerade solche Hacks über JS versuche ich zu vermeiden. Für die paar Zeilen wird meistens nämlich direkt die komplette JQuery-Library eingebunden. Unnötige Request/Datenmenge und optimal wartbar ist das ganze auch nicht. Mit kleinen Änderungen könnte man den Umstand bestimmt auf minimalen Code beschränken.

Aber das ist wahrscheinlich wieder ein ganz anderes Thema. Sorry für Offtopic :)
 
Falls nichts explizit dagegen spricht, würde ich das auch per jQuery lösen. Natürlich wäre CSS zu bevorzugen, aber Ninja-Tricks wie faux columns stammen aus einer Zeit als Webseiten noch mit einem starren Layout gebaut wurden.

Hier ist ein einfaches Beispiel:
Code: 
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="left" style="height:300px;width:100px;border:1px red solid;float:left;"></div>
<div id="middle" style="width:100px;border:1px red solid;float:left;"></div>
<div id="right" style="width:100px;border:1px red solid;float:left;"></div>

<script type="text/javascript">
$(function() {
    var containerHeight = [];
  
    $('#left, #middle, #right').each(function() {
        containerHeight.push( $(this).height() );
        $(this).height(containerHeight.sort().slice(-1) );
    });
});
</script>
</body>
</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben