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

【问题标题】：Absolutely positioned footer leaves a gap at the end of the page绝对定位的页脚在页面末尾留下一个空白
【发布时间】：2021-04-03 22:05:28
【问题描述】：

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

我有一个简单的 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 的想法，但问题仍然存在。

【问题讨论】：

我认为您需要在问题中添加足够的代码，以便我们可以看到问题，因为您在此处显示的基础知识不会显示它。你确定间隙不在页脚中吗？
是的，我确定。我已经用检查页面时选择的页脚和正文的一些屏幕截图更新了我的原始问题
删除你的body/html标签上的height: 100%;!!!!!!

标签： html css css-position absolute

【解决方案1】：

这是您代码笔中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>

【讨论】：

哇，原来如此，非常感谢。你能解释一下为什么会发生冲突吗？
基本上高度比内容高，所以即使页脚在底部，body（或html，不确定）一直在下面。
100% 和 100vh 不同。 developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/…
它占用了 html 元素中 100% 的空间，这可能有一些奇怪的默认样式。
另见：stackoverflow.com/a/47652830/14550434

【解决方案2】：

如果您说的是左侧的间隙，请尝试使主体的边距为零。

body {
    margin: 0px;
}

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

【讨论】：

我试过 margin/padding: 0;几乎所有东西都没有效果

【解决方案3】：

尝试将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-我不太确定为什么会这样，也许有更多知识的人可以解释一下。

【讨论】：

也不行，我不明白是什么让你的代码与我的不同
不同之处在于高度是在页脚内的内容上设置的，而不是在页脚本身上。也就是说，我无法重现您的问题。您能否提供有关您的代码的更多详细信息？
我尝试了您的建议，但它似乎对我不起作用。我更新了我的问题，提供了一个复制问题的 codepen 链接