CODEWITHSUNDEEP
htmlcssflexbox
Gambai
Gambai

Reputation: 690

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

Upvotes: 1

Views: 502

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371271

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.

Upvotes: 1

Related Questions