How to make the footer stick to the bottom of its container? | Scrimba | Page 1

glacial haven Nov 29, 2022, 11:51 PM

#

I don't know how to align the footer in the first solo to the bottom of its container, so far I have tried align-self: flex-end; (its parent is has a flex display) I tried margin-top: auto; as well, and I don't really want to have a fixed margin.

winter bridge Nov 29, 2022, 11:53 PM

#

Try margin-bottom:0 on that footer

#

Or check your body padding

glacial haven Nov 29, 2022, 11:59 PM

#

The card element is a child of the body

#

I just tried giving the container a margin-bottom: 0 and didn't work, same with the footer

glacial haven Nov 30, 2022, 12:05 AM

#

winter bridge Or check your body padding

Also tried that, and my body margins are set to 0, except for the top

winter bridge Nov 30, 2022, 12:10 AM

#

Body {
Height:100%
}
?

glacial haven Nov 30, 2022, 12:11 AM

#

winter bridge Body { Height:100% } ?

nope 😦

#

I don't think is anything to do with the body, though, since the footer is inside a container

#

These are the properties of that container:

.card-container {
    text-align: center;
    margin-top: 30px;
    width: 317px;
    height: 780px;
    background-color: #1A1B21;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

winter bridge Nov 30, 2022, 12:13 AM

#

Ah then remove that height. I’m guessing your content is not high enough for that container.

glacial haven Nov 30, 2022, 12:22 AM

#

winter bridge Ah then remove that height. I’m guessing your content is not high enough for tha...

I feel so dumb right now lol

#

Thank you so much!

glacial haven Nov 30, 2022, 12:39 AM

#

@winter bridge A question, should I close the discussion after getting the response I wanted? Or leave it open?

#How to make the footer stick to the bottom of its container?