-1

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.stack.imgur.com/sPuEI.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

radiantwave
  • 1
  • 2

2 Answers2

0

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

.testimonial-text {
  /* padding:700px; */
  max-width:500px;
  ...
}
Pouya M
  • 183
  • 2
  • 10
  • 1
    Thanks, this is a great option. Do you know why in the original code the padding goes "over" the other elements like this instead of pushing the other objects away. I thought that with larger padding area it should then move the margins out as well which would push the other elements away from it? – radiantwave Apr 30 '22 at 01:07
  • padding is the space between the content and the border, whereas margin is the space outside the border - [more info](https://stackoverflow.com/questions/5958699/difference-between-margin-and-padding) – Pouya M Apr 30 '22 at 01:14
0

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.

Allan J.
  • 471
  • 4
  • 15
  • 1
    Thanks, this looks to be the solution. May I ask, why does the padding go "over" the other elements like this instead of pushing the other objects away. I thought that with larger padding area it should then move the margins out as well which would push the other elements away from it? – radiantwave Apr 30 '22 at 01:01