绝对定位的页脚在页面末尾留下一个空白

Question

我知道这可能是一个常见的错误，让我看起来很愚蠢，但现在已经两天了，我无法克服：

我有一个简单的 html 页面，有一些标签和一个页脚。

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

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

我的 css 看起来像这样：

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

问题是，当我加载页面时，这会在页脚之后的最后留下一个空白。我怎样才能让它粘在底部？

如果我检查页面，我可以看到间隙不是由页脚或正文的任何边距或填充属性引起的，但间隙本身是正文的一部分，我可以不明白为什么它在那里。

我试过的东西：

让它相对于父级，甚至是固定的或粘性的，显然没有用；
使用 transform:translate()，但不是很优雅也不有效

免责声明：

页脚来自 JQuery 函数，该函数从另一个 html 文件中注入代码，如建议的那样 here，但我认为这无关紧要。

HERE IS A CODEPEN THAT SHOWS THE PROBLEM

有什么想法吗？谢谢

编辑：

我想我准备放弃并遵循 this 的想法，但问题仍然存在。

Answer 1

尝试从 footer 样式中提取 height 属性，并将其应用于 footer 的内部内容。像这样：

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-我不太清楚为什么会这样，也许有知识的人可以解释一下。

Answer 2

如果您在谈论左侧的间隙，请尝试使正文的边距为零。

body {
    margin: 0px;
}

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

Answer 3

这是您在代码笔中 html 和 body 标签上的 height: 100%;。

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>

绝对定位的页脚在页面末尾留下一个空白

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

html

css

css-position

absolute

编辑：