Fußzeile, die nicht unter dem Hauptinhalt in Flexbox ausgerichtet ist

Question

Ich benutze Flexbox, um eine Reihe von Bildern ansprechend auszulegen.

.cards 
    .card.card1 
    .card.card2 
    .card.card3 
    .card.card4 
    etc.... 
footer 

css:

.cards{ 
    display: flex; 
    width: 100%; 
    flex-wrap: wrap; 
    height: 81.2rem; 
} 

.card{ 
    display: flex; 
    flex-wrap: wrap; 
    height: 100%; 
    max-height: 28rem; 
    position: relative; 
} 

Das Problem, das ich habe, ist ...

Ich habe eine Fußzeile, die unter dem .cards div sein muss, aber da .cards eine Höhe aufweist, die Fußzeile schwebt über dem Div, wo ich die Höhe sage. (Die Karten selbst reichen über die Höhe hinaus.)

Ich habe versucht eine höhere Höhe einzustellen, allerdings vergrößert sich dann der Platz zwischen den Kartenreihen (was ich nicht will). Ich habe auch versucht, keine Höhe zu setzen, aber dann legen die Karten überhaupt nicht auf, sie verschwinden einfach oder schweben weit über die Seite.

Gibt es eine Möglichkeit, die .cards div zu löschen?

Oder einfach nur die Fußzeile unter den Karten erscheinen?

Dies zeigt die Fußzeile, wo es derzeit ist, die falsch ist.

Diese Fußzeile zeigt, wo ich es brauchen:

Answer 1

Statt height: 100%, die den Behälter auf einer festen Höhe begrenzt, verwenden min-height: 100% oder Höhe sogar komplett löschen.

Wenn Ihre height -Eigenschaft installed properly ist, müssen Sie möglicherweise die min-height auf Eltern- oder Vorfahrenelemente anwenden.

Weitere Details: Working with the CSS height property and percentage values

---

Anmerkungen von OP:

Fügen Sie die Höhe der direkten Kinder der Flex-Box, dies ermöglicht den Behälter seines bestimmen Höhe.

In einem anderen Hinweis, wenn Sie die Höhe auf die Unter-Kinder (nicht direkte Nachkommen) setzen, wird die Container Flex-Box nicht wissen, wie seine eigene Größe einstellen und wird keine Höhe haben.