Feste Höhen für die drei Spalten

  • Hey,

    deine Seite ist im Wartungsmodus nicht aufrufbar, daher kann ich nur raten.

    Aber es sollte reichen, wenn du von vorne rein weißt, dass jede Spalte eine Höhe von (beispielsweise) 500px haben soll, kannst du das mit

    CSS
    height: 500px;

    machen. Solltest du alle Spalten gleich hoch haben wollen, und kennst ihre Höhe nicht (was meistens der Fall ist, insb. hinsichtlich unterschiedlicher Displaygrößen), dann musst du die Spalten untereinander "verbinden". Das geht z.B. mit Hilfe von flexbox oder grid. Ein Flexbox-Layout sollte an für sich dann dafür reichen. Das Grid-Layout ist etwas umfangreicher (insb. 2-dimensional, während flexbox 1-dimensional ist), wird aber auch nicht so stark unterstützt.

    Gruß

    ilou

  • Hey,

    laut Seiten-Quellcode (und soweit man auch sieht), haben deine drei Spalten bereits die gleiche Höhe, gesetzt durch

    CSS
    @media screen and (min-width: 1025px)
    .hpBoxNews .presentUser, .hpBoxNews .whatInfo, .hpBoxNews .dwhatInfo {
        height: 410px;
    }

    Daher, da ich deine Frage so verstanden hatte als würdest du gerne wissen wollen, wie man die gleich hoch macht, verstehe ich die Frage jetzt nicht mehr so ganz, weil du es ja bereits umgesetzt hast.

    Einziges Problem ist - wie oben angekündigt für unterschiedliche Display-Größen - dass der Text bei schmaleren Displays aus den Elementen überläuft.

    Daher wäre jetzt erst nochmal die Frage, ob du deine Fragestellung ein wenig mehr beschreiben kannst.

    Gruß

    ilou

  • Ich habe da ein Problem in der Tablet-Ansicht quer. Da schießt der Text der zweiten und dritten Spalte über den unteren Rand. Und das will ich natürlich ändern, weiß aber nicht wie.

  • Wenn es nur für Tablets im Landscape sein soll:

    CSS
    @include screen-md {
        .hpBoxNews .presentUser, .hpBoxNews .whatInfo, .hpBoxNews .dwhatInfo {
            height: 500px;
        }
    }

    Ansonsten kannst du dir gerne das hier anschauen.

  • Oder allgemein kann man sein CSS auch wie folgt anpassen:

    CSS
    @media screen and (min-width: 769px), print
    .col-md-4 {
        align-items: stretch;
    }
    
    @media screen and (min-width: 1025px)
    .hpBoxNews .presentUser, .hpBoxNews .whatInfo, .hpBoxNews .dwhatInfo {
        height: 100%;
        margin-top: 0 !important;
    }

    Da <div class="row"> bereits ein Flexbox-Layout erzeugt, kann durch Zeile 4 das Layout gezwungen werden, alle Elemente darin gleich hoch zu machen (vorausgesetzt sie haben natürlich die Klasse col-md-4). Mit der zweiten Anpassung sagt man dann, dass jedes Element die Höhe 100% haben soll, was dann der vollen Höhe des Eltern-Elements entspricht (wurde ja mittels Zeile 3 indirekt angegeben).

    Das einzige unschöne hier ist, dass dabei das margin-top entfernt werden muss, und weil es höher-rangige Regeln gibt, auch noch mit einem !important - ziemlich unschön. Vielleicht kennt sich da aber jemand besser mit CSS aus und kann da aushelfen.

    Gruß

    ilou

    EDIT: Vielleicht will man align-items nur hier entsprechend nutzen. Da könnte man dann noch entsprechende Regeln einfügen, dass das nur in z.B. .hpBoxNews geändert wird, um das Design auf ggf. anderen Seiten nicht zu zerstören.

  • Eine feste Höhe ist bei Text quatsch. Da du schon flexbox benutzt kannst du das so umsetzen:

    CSS
    .hpBoxNews .box {
        height: 100%;
    }

    Und dann brauchst du noch einen Abstand bei der letzten Box:

    CSS
    .hpBoxNews .col-md-12 {
        margin-top: 20px;
    }

    Das selbe dann bei den Boxen ganz unten:

    CSS
    .diveIntoActionList {
        height: 100%;
    }

    Das 🐶i springt hoch, das 🐶i spingt weit. Warum auch nicht - es hat ja Zeit ☝️

    Jeder sollte ein 🐶i haben. Ich habe keins 👀

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!