Gambai Gambai - 5 months ago 7
CSS Question

Footer not aligning below main content in flexbox

I'm using flexbox to responsively lay out a bunch of images.

.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;
}


The problem I'm having is...

I have a footer that needs to be below the
.cards
div, but since
.cards
has a height, the footer is hovering over the div where I tell the height to be. (The cards themselves extend past the height.)

I have tried setting a taller height, however, then the space between the rows of cards expand (which I don't want). I've also tried not setting a height, but then the cards don't lay out at all, they just disappear or float way down the page.

Is there a way I can clear the
.cards
div?

Or just in general, get the footer to appear below the cards?

This shows the footer where it currently is, which is incorrect.

footer in wrong position

This shows the footer where I need it to be:

enter image description here

Answer

Instead of height: 100%, which limits the container to a fixed height, use min-height: 100% or remove height altogether.

If your height property is installed properly, you may need to apply the min-height to parent or ancestor elements.

More details: Working with the CSS height property and percentage values


Additional notes from OP:

Add the height to the direct children of the flex-box, this allows the container to determine its height.

On another note, if you put the height on the sub-children (not direct descendants), the container flex-box will not know how to set its own size and will have no height.

Comments