Absolutely positioned footer leaves a gap at the end of the page

Question

I know this may turn out to be a common mistake and make me look stupid, but it's been two days now and i can't get over it:

I have a simple html page, with some tags and a footer.

<body>
    <!-- many tags and stuff -->

    <footer>
        <!-- stuff in here too -->
    </footer>
</body>

My css looks like this:

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 25vh;
}

The problem is that when i load the page this leaves a gap in the end, after the footer. How can i make it stick to the bottom?

If i inspect the page i can see that the gap is not caused by any margin or padding property of the footer or of the body, but the gap itself is part of the body, and i can't figure out why it's there.

Things i tried:

Make it relative to a parent, or even fixed or sticky, obviously didn't work;
Use transform: translate(), but that's not very elegant nor effective

Disclaimer:

The footer comes from a JQuery function that injects the code from another html file, as suggested here, but i believe that shouldn't matter.

HERE IS A CODEPEN THAT SHOWS THE PROBLEM

Any ideas? Thank you

Edit:

I think i am ready to give up and follow this idea, the problem persists though.

I think you’ll need to put enough code in your question so that we can see the problem as the basics you show here won’t show it. Are you sure the gap isn’t in the footer? — A Haworth, Apr 04 '21 at 12:45
Yes, i am sure. I have updated my original question with some screenshots of the footer and the body selected while inspecting the page — yZemp, Apr 04 '21 at 14:52

score 1 · Answer 1 · answered Apr 03 '21 at 22:54

1

If you're talking about the gap on the left hand side, try making the body have zero margin.

body {
    margin: 0px;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 25vh;
    background-color: aquamarine; /* only here for demonstration purposes */
}

answered Apr 03 '21 at 22:54

Chucky

398
3
15

I tried margin/padding: 0; on pretty much everything, nothing worked – yZemp Apr 04 '21 at 08:51

score 1 · Accepted Answer · answered Apr 04 '21 at 15:17

It's your height: 100%; on your html and body tags in your codepen.

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
  
    background: blue;
    color: white;
}

.footer-wrapper {
    height: 25vh;
    width: 100%;
    

    font-size: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    text-align: center;
}

footer div {
    margin: 4vh auto 0px;
}

footer p {
    margin: 5vh auto;
    padding-top: 3vh;
    width: 30%;
    font-size: .7rem;
    border-top: solid 1px var(--white);
}



/* UNINPORTANT CODE */

html,
body {
    margin: 0px;
    padding: 0px;
    /* height: 100%; THIS IS THE PROBLEM */
}

html {
    color: var(--black);
    font-size: max(1vw, 2vh);
}

body {
    background: var(--white);
    flex-direction: column;
    flex-wrap: nowrap;
}


* {
    margin: 0px;
    padding: 0px;
}



#header {
    width: 100%;
    margin-top: 4vh;
    box-sizing: border-box;

    color: var(--black);
}

header {
    height: 100%;
}

#header h1 {
    width: 70%;
    min-height: 20px;
    font-size: min(3rem, 4vw);
    margin: auto;
    text-align: center;
    box-sizing: border-box;

    padding-bottom: 1vh;
    border-bottom: solid min(3px, 1vw) black;
}

section {
    display: block;
    margin-bottom: auto;
    padding: 1vw 20vw;
    font-size: 3.8vh;
    text-align: justify;
    /* height: 100vh; */
}

<body>
  <div id="header">
    <header>
      <h1>Header</h1>
    </header>

  </div>

  <section id="tab1" class="tab view">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima iure facilis quasi nihil nemo ullam ut,
      eum,
      impedit et fuga aliquid sint eius ratione mollitia quae asperiores itaque autem unde.
      Iure dolores explicabo deserunt dolorem saepe illum alias quaerat placeat ut? Eaque perspiciatis atque
      exercitationem ullam, omnis assumenda cum quidem ad veniam ipsam eveniet officiis quasi possimus vero
      consequuntur animi.
      Nisi accusamus dignissimos architecto sequi totam corrupti quisquam voluptatibus hic enim odio. Fuga
      voluptatum culpa aliquam debitis sunt corporis voluptatem soluta animi, unde praesentium consectetur ullam?
      At totam ab minus.</p>
  </section>

  <footer>
    <div class="footer-wrapper">
      <p>Thank you</p>
    </div>
  </footer>
</body>

Wow it was it, thanks a lot. Are you able to explain me why it conflicted? — yZemp, Apr 04 '21 at 15:33
Basically the height was taller than the content, so even though the footer was at the bottom, the `body` (or `html`, not sure) kept going underneath. — , Apr 04 '21 at 15:36
how could the body be taller then the page if i set it to be 100vh? — yZemp, Apr 04 '21 at 15:37
`100%` and `100vh` are different. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#percentages — , Apr 04 '21 at 15:37
it takes up 100% of the space in the `html` element, which probably has some weird default styling. — , Apr 04 '21 at 15:41
also see this: https://stackoverflow.com/a/47652830/14550434 — , Apr 04 '21 at 15:43

brazilla_ray · Answer 3 · 2021-04-03T23:55:15.943

0

Try taking the height property out of the footer styling, and apply it to the inner content of footer. Something like this:

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: red;
}

p {
  height: 25vh;
}

<body>
  <h1>footer gap?</h1>
  <footer>
    <p>it's a footer!</p>
  </footer>
</body>

ps- I'm not really sure why this works, maybe someone more knowledgeable can explain.

edited Apr 03 '21 at 23:55

answered Apr 03 '21 at 22:41

brazilla_ray

53
1
8

Doesn't work either, i don't understand what makes your code different from mine – yZemp Apr 04 '21 at 08:55
The difference is that the height is being set on the content _within_ the footer, rather than on the footer itself. That said, I'm having trouble reproducing your problem. Could you provide more detail about your code? – brazilla_ray Apr 04 '21 at 14:51
I tried your suggestion, but it didn't seem to work for me. I updated my question with a link to a codepen that replicates the problem – yZemp Apr 04 '21 at 15:13

Absolutely positioned footer leaves a gap at the end of the page

Edit:

3 Answers3