CSS: Höhe definieren

[MrSpock]

Hallo,

ich habe ein CSS Problem.

Ich benutze das YAML Framework und habe ein div Element ym-column. Dieses hat 3 Kinder (Spalten) ym_col1 bis ym-col3. Ich möchte erreichen, dass alle 3 Spalten immer die gleiche Höhe haben. Deshalb habe ich height auf inherit gesetzt. Die Mutter ym-column nimmt korrekterweise immer die Höhe der größten Spalte an, da ihre Höhe auf auto steht. Schaue ich mir die "errechnete" Höhe von ym-column an und setze diese Höhe manuell z.B auf 600px; folgen alle Spalten mit der Höhe.

Ich habe den Eindruck, dass inherit hier nicht den tatsächlichen Wert der Mutter-Höhe vererbt, sondern den "Wert der Eigenschaft" also "auto". Damit werden die Spalten aber nur so groß wie ihre Inhalte. Wie bekomme ich es hin, dass die Höhe der Kinder den Wert der Höhe der Mutter übernehmen.

[Sir Rufo]

Hilft dir das hier weiter?
http://matthewjamestaylor.com/blog/e...r-css-no-hacks

[Phoenix]

Vermutlich nicht. Das hintereinanderschieben der floatenden Div's dürfte mit YAML als layout container nahezu nicht machbar sein.

[MrSpock]

Das ist ein interessanter Beitrag, aber es ist wie Phoenix gesagt hat, nicht so einfach über das YAML Framework zu erledigen.

Hätte ehrlich gesagt gedacht, dass es in HTML / CSS einfacher wäre, drei gleich hohe Spalten zu erzeugen.

[BUG]

Hast du display: table und co. schon mal angeguckt? Vielleicht bekomst du es damit hingebastelt.


Edit: Alternativ dazu ... mal in die Doku gucken: Equal Heights Grids
Das wird vermutlich das sein, was am nächsten herankommt ... allerdings für ein Grid

[nuclearping]

Ich hab mit dem YAML-Framework noch nicht gearbeitet. Hab grad mal über deren Webseite gestöbert. Sieht interessant aus. Nutze bisher immer nur Bootstrap. Kenne das Problem aber auch aus meinen eigenen Web-Projekten. Daher sorry, wenn ich mit den Tipps vielleicht am Sinn vorbeischiesse.

Hilft dir das? http://www.ejeliot.com/blog/61

Ansonsten: Hast du eine Möglichkeit, jQuery zu nutzen? Da könntest du sowas wie das machen:

Code:

// HTML
<div class="ym-column">
  <div class="ym-col1 equalheight">...</div>
  <div class="ym-col2 equalheight">...</div>
  <div class="ym-col3 equalheight">...</div>
</div>

// jQuery
$(function() {

equalHeight = function(container){

    var currentTallest = 0, rowDivs = new Array(), $el, marginBottom = 0;
    
    $(container).each(function() {
        $el = $(this);        
        $($el).height('auto');
        var currentHeight = $el.height();
        if (currentHeight > currentTallest)
            currentTallest = currentHeight;
        rowDivs.push($el);
    });
    for(currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
        rowDivs[currentDiv].height(currentTallest + marginBottom);
    }
};

function setHeights() {
    equalHeight('div.ym-column > div.equalheight');
}

$(window).load(function() {
    setHeights();
});


$(window).resize(function(){
    setHeights();
});

});

[jobo]

Zitat von MrSpock:

Hätte ehrlich gesagt gedacht, dass es in HTML / CSS einfacher wäre, drei gleich hohe Spalten zu erzeugen.

Hab vor 5 oder 8 Jahren mal damit eine kleine Seite gebastelt, erinnere mich noch daran, dass man verschiedene Grundlayouts "fertig" bekommt und einfach adaptieren kann.
Damals habe ich zum ersten Mal mitbekommen, dass man hier verschiedene Konzepte verfolgen kann, die dann eben in den Grundlayouts teilweise umgesetzt waren.

Ich hab davon nicht viel Plan, aber den Verdacht, dass Du da vielleicht etwas umsetzen willst, was nicht in das verwendete Basis-Layoutkonzept gehört bzw gegenläufig ist.

Hier ein Link: http://www.yaml.de/docs/index.html#yaml-layouts
Abschnitt "Equal Height Column Rulers" klingt vielleicht interessant.

[MrSpock]

Die Sache ist noch etwas komplizierter.

Ich nutze typo3, um ein CMS aufzusetzen. Dabei benutze ich ein CSS Gerüst, welches ich über thinkintags.com definiert habe, welches wiederum auf das YAML Framework setzt.

In thinkintags habe ich nicht mit YAML Grids gearbeitet, sondern mit ym-wbox und ym-columns, so dass die Equal Height Grids jetzt nur schwer umsetzbar sind. Der Ansatz von nuclearping mit JQuery könnte aber klappen. Und über jQuery arbeitet auch SyncHeight aus dem YAML Framework. das werde ich mir jetzt beides nochmal anschauen.

[MrSpock]

Danke hat super geklappt mit jquery. Habe j3query über den extentionmanager installiert. Dann nur jcore als zu ladende lib angeklickt. Dann über

Code:

includeJS.file1 = fileadmin/yaml/add-ons/syncheight/jquery.syncheight.js

den JS Code geladen und in diese Datei noch den Code:

Code:

$(document).ready(function(){
  $('.ym-col1, .ym-col2, .ym-col3').syncHeight({ updateOnResize: true });
});

eingefügt, damit alle 3 Spaltenhöhen synchronisiert werden.

Klappt wie die wilde Wutz.

[Valle]

Und damit ist das Layout für alle, die JS deaktiviert haben, kaputt.

Keine schöne Lösung!