Grid Elemente gleiche Höhe

[Generic1]

Hallo,

ich hab folgendes Problem, welches ich in jsfiddle nachgestellt habe:

http://jsfiddle.net/VEwhY/2/

Ich hätte gerne, dass alle 3 div- Elemente gleich groß sind, leider ist das aber momentan nicht der Fall, wenn man den Browser zusammenschiebt bzw. auseinander zieht.
Weiß jemand wie ich das machen kann, dass diese 3 Elemente immer gleich hoch sind?

Vielen Dank und lg
Generic1

[Bas]

Die Elemente sind voneinander unabhängig, also wirst Du mit es mit CSS nicht hinkriegen das wenn sich die Höhe der Box A (bedingt durch den Zeilenumbruch) ändert, die Höhe der Boxen C+B anpassen.
Möglicher Workaround wäre es in den Boxen (left, middle, right) nur den Content (und die waagerechten Toplines) zu lassen und den Boxen-Look durch verschachtelte Texturen in den umgebenden Div (containerFirstRow) zu verlagern. Allerdings ziemliches Gefrickel, und die Schatten werden Probleme machen.
ALternativ ... den H3-Elementen (oder gleich den DIVs) ne feste Höhe zuweisen, welche für 2-3 Zeilen ausreicht .. natürlich nicht sehr schön - wenn die Headlines kurz sind entsteht unter diesen ein leeres Loch, und falls diese mal zu lang sind, ragt der Text über den Button (overflow:visible), bzw. wird abgeschnitten (overflow:hidden).

Daher ... lieber Javacript. Die Höhen der drei Boxen abfragen (siehe http://api.jquery.com/height/), und den kleineren Boxen die Höhe der größten Box zuweisen (und dran denken die Funktion bei Änderung der Viewport-Breite wieder aufzurufen).

[Spooky]

Es funktioniert auch ohne JS, nur nicht so wie man sich es vielleicht wünschen würde . Siehe zB Equal Height Columns with Cross-Browser CSS. Ob diese Lösung jedoch auch in deinem Fall funktionieren wird ist aber auch fraglich.

[Generic1]

OK, ich habs jetzt ausprobiert, ohne JS gehts nicht -> der Beitrag ist aber für andere Zwecke nützlich.

Mit JS ist es auch eher schwierig, ich habs jetzt mal ganz schnell ausprobiert,
Da brauch ich ja immer eine Mastertspalte, die vorgibt, ob die anderen höher oder weniger hoch werden sollen. Die Materspalte muss also immer die Spalte sein, welche beim zusammenschieben des Browsers am höchsten ist -> Das weiß ich aber nicht :-(
Hat dafür noch jemand vorschläge, wie man den Javascript Code schreiben könnte

<script type="text/javascript">
       $(window).resize(function(){
            var heightLeft = $('#left').height();
            var heightMiddle = $('#middle').height();
            var heightRight = $('#right').height();
            console.log("Das ist die Höhe " + heightLeft);
            
            if(heightRight > heightLeft) {
                $('#left').height(heightRight);
                }
            if(heightRight > heightMiddle) {
                $('#middle').height(heightRight);
                }
          });
    </script>

[blue12]

So in etwa:

$(window).resize(function(){

    // clean height
    $('#left, #middle, #right').height('auto');

    var 
      heightLeft = $('#left').height(),
      heightMiddle = $('#middle').height(),
      heightRight = $('#right').height(),
      maxHeight = heightLeft;
    
    if (heightMiddle > maxHeight) maxHeight = heightMiddle;
    if (heightRight > maxHeight) maxHeight = heightRight;

    $('#left, #middle, #right').height(maxHeight);

}); 

[Spooky]

Spontan würde mir auch folgende Lösung einfallen (absolut positionierte "background" divs): http://jsfiddle.net/bJxfp/

// edit: hier abgeändert mit den Styles von dir: http://jsfiddle.net/bJxfp/8/

[Spooky]

Habe dein Beispiel nochmals überarbeitet und es nun so gelöst: http://jsfiddle.net/ddYxX/ . In der Variante muss man nicht selbst manuell die Positionen der background divs festlegen, sondern nutzt auch das jeweilige Grid Framework dafür. Habe das Ganze auch hier ein wenig näher beschrieben.

Was allerdings dann noch fehlen würde sind die media queries für die background und content divs.

[Bas]

Respekt!

[Generic1]

Auch von mir Respekt und Danke!!!
lg

[john68]

(Ja, alter Thread, aber dennoch. Vielleicht ist es für jemanden interessant):

Da seit dem Internet Explorer 8 der Wert display: table-cell und display: table unterstützt wird, kann man das ja auch einfach einsetzten. Das wäre vermutlich die einfachste Form.

vg,
john

[Mag....]

Danke auch noch mal von mir @Spooky

[folkfreund]

Habe das Ganze auch hier ein wenig näher beschrieben.

Danke!

Das ist ein sehr interessanter Ansatz. Mich freut vor allem, dass er ohne Javascript auskommt.

Ich habe es mal ausprobiert im Zusammenspiel mit einem Grid-System, das ich kürzlich entdeckt habe: Lemonade
In diesem Fall muss das zusätzliche Markup tatsächlich hinter dem Content eingebunden werden. Das habe ich durch ein Modul "Eigener HTML-Code" gemacht.
Die Mediaqueries müssen dann die Background-Elemente ggf. auch in der Höhe anpassen.
Funktioniert wunderbar!

Nachteilig ist leider nur, dass

1. das zusätzliche Markup muss die Struktur des Inhalts nachbilden
2. es damit nicht möglich ist, z.B. ein vierspaltiges Layout in ein zweispaltiges zu verändern.

Den ersten Punkt könnte man evtl. durch ein angepasstes Article-Template erreichen, in dem die CEs die Spalten darstellen. Hier müsste es möglich sein, die Struktur inklusive der für das Grid nötigen CSS-Klassen automatisch aus dem Inhalt nachzubilden.

Für den 2. Punkt habe ich noch keine Idee. Problem ist die Höhenberechnung der Hintergründe - innerhalb einer Zeile würde man sich ja weiterhin gleiche Höhe wünschen, evtl. auch weiterhin alle 4 Elemente gleich hoch. Enthalten sie jedoch unterschiedlich viel Inhalt, dann passt height:50% für die Hintergrund-divs nicht...

Meine Testseite findest du hier: http://contao-experimente.folkfreun....php/infos.html

Vielleicht hast du dazu auch noch eine geniale Idee?

Gruß, folkfreund

[Spooky]

Du könntest die 4 Spalten ja in 2x2 Spalten aufteilen. Ich denke aber, dass das mit vorgefertigten grids nicht möglich ist, weil du ja für die äußeren 2 Spalten einen anderen breakpoint brauchst als für die inneren. (Aber vielleicht gibt es da ja doch etwas, oder du machst dir einfach dein eigenes grid System )

[folkfreund]

Mehrere Breakpoints sind nicht das Problem - das habe ich ja in meinem Beispiel auch schon.

Und klar, technisch könnte man es mit 2x2 Spalten machen. Aber ich würde die Zuordnung der CEs zu den Spalten gerne mit Contao-Mitteln herstellen. In meinem Beispiel sind auf der oben angegebenen Seite 2 Artikel enthalten. Der untere enthält 4 CEs, denen ich jeweils die passende Grid-Klasse gegeben habe. Ein fünftes CE erzeugt z.Zt. das Markup für die Backgrounds - das würde ich gerne automatisiert erzeugen. Das sollte möglichst unabhängig von der tatsächlichen Aufteilung nur anhand der im Artikel enthaltenen CEs und deren CSS-Classes geschehen.

Wie könnte man denn die Gruppierung in 2x2 Spalten mit Contao-Mitteln herstellen? Spontan fällt mir da nur so etwas ein, wie die Untergruppen durch zusätzliche CEs ähnlich Content-Slider oder Akkordeon zu bilden. Da müsste dann wohl eine eigene Erweiterung her...

Jedenfalls vielen Dank für deine Rückmeldung!

folkfreund

[MacKP]

Wie könnte man denn die Gruppierung in 2x2 Spalten mit Contao-Mitteln herstellen? Spontan fällt mir da nur so etwas ein, wie die Untergruppen durch zusätzliche CEs ähnlich Content-Slider oder Akkordeon zu bilden. Da müsste dann wohl eine eigene Erweiterung her...

Für sowas kann man super https://contao.org/de/extension-list..._html5.de.html nutzen ;-)

Viele Grüße

[Spooky]

Genau, mit der semantic_html5 Extension lässt sich das gut umsetzen. Für einen nicht HTML/CSS-technisch versierten Redakteur ist es wahrscheinlich eher ungeeignet, aber vielleicht ist das bei dir ja kein Thema (und es stellt sich sowieso die Frage, in wie weit man solche aufwändigen Layout Features überhaupt wirklich "DAU-tauglich" umsetzen kann).

[folkfreund]

Danke euch beiden, das werde ich mir bestimmt ansehen.

Einen guten Start in die Woche,
folkfreund