Stellen Sie zwei Spalten auf die gleiche Höhe

8

Ich versuche, ein 2-Spalten-Design (mit Twitter Bootstrap ) mit zwei Spalten gleicher Höhe zu erstellen.

Nehmen wir das Beispiel:

%Vor%

Da .span2 die höchste der beiden Spalten ist, wird .row-fluid stretch zur Anpassung an die Höhe verwendet. Nach dem Lesen von diesem Artikel habe ich diese Einstellung erwartet min-height: 100% auf .span10 würde es auf die volle Höhe strecken, aber es tut nicht:

Ссылка

Warum ist das? Gibt es eine Lösung, um .span10 auf die ursprüngliche Höhe zu strecken und dabei eine feste Höhe zu vermeiden, damit dieses Design flexibel bleibt?

    
Benjamin 11.09.2012, 18:25
quelle

2 Antworten

11

Versuchen Sie Folgendes:

Ссылка

Beachten Sie, dass ich display:table und display:table-cell hinzugefügt habe, aber auch Ich habe die CSS-Selektornamen geändert, damit sie die benötigte Priorität erhält.

%Vor%     
samura 11.09.2012, 18:36
quelle
0

Und ein alter Klassiker ist die falsche Spalten -Technik. Funktioniert einwandfrei in jedem Browser und ist einfach zu implementieren.

Ein Nachteil: Sie müssen ein Hintergrundbild (und damit eine weitere Anfrage) hinzufügen, es sei denn, Sie verwenden die Base 64-Codierung Ihr Hintergrund).

Die Einstellung von height / min-height auf 100% ist bei Elementen auf Blockebene mit "auto height" nicht möglich.

    
Arve Systad 11.09.2012 19:00
quelle

Tags und Links