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

问题描述

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

<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 的想法了，但问题仍然存在。

解决方法

如果您在谈论左侧的间隙，请尝试使主体具有零边距。

body {
    margin: 0px;
}

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

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

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>

尝试从 height 样式中取出 footer 属性，并将其应用于 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- 我不太确定为什么会这样，也许知识渊博的人可以解释一下。

absolute css-position html