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

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

@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

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

@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:

@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:

.hpBoxNews .box {
    height: 100%;
}

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

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

Das selbe dann bei den Boxen ganz unten:

.diveIntoActionList {
    height: 100%;
}

Quote from Edda1000

Irgendwie klappt es immer noch nicht.

Habe alle Codes übernommen. Das Ergebnis sieht so aus:

Bei dir ist noch Folgendes drin:

.hpBoxNews .presentUser,
.hpBoxNews .whatInfo,
.hpBoxNews .dwhatInfo {
    height: 410px;
}