'Sticking footer to bottom of page using flexbox and margin-top: auto; not working

I'm trying to get my footer to stick to the bottom of the page using margin-top: auto; but it doesn't have any effect.

I thought it might be because the parent has no height set but when setting height: 100vh it just shrinks the footer: https://i.imgur.com/FBXpT7U.png

I can't figure out why this isn't working.

HTML:

<body>
    <div class="footer">
        <p>Text here</p>
    </div>

</body>

CSS:

body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.footer {
    background-color: #1F2937;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    margin-top: auto;
}

I'm working through a project on "The Odin Project". Here's the full code: codepen

htmlcssflexbox


Solution 1:[1]

In your CodePen, the empty gap below the footer is taken up by the padding: 700px on .testimonial-text. Removing it (or lowering it to a reasonable value) fixes the issue.

Solution 2:[2]

You need to set max-width instead of using padding:700px to get the desired style!

.testimonial-text {
  /* padding:700px; */
  max-width:500px;
  ...
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Allan J.
Solution 2

Related Questions