html - 我无法让页脚留在页面底部。

Question

我似乎无法让页面上的页脚保持在底部，并且在我想添加更多内容时不断将其向下推。现在我知道这个问题已经被问了大约一百万次，我已经阅读了许多教程并观看了几个关于这个主题的视频。

但是，我似乎无法让它发挥作用。我不知道我做错了什么。页脚似乎只留在一个地方。我知道对于这里的某个人来说，您会发现一个很容易修复的明显错误。但是，无论如何我都不是专业的网页设计师。事实上，这根本不是我的工作。但我总是喜欢学习如何做事，而且我的网站看起来很棒(至少对我而言)。在我的一生中，我就是无法弄清楚这个问题出了什么问题。

我应该先粘贴我页面的整个代码吗？

Answer 1

查看 this fiddle ，希望我没有误解你的问题。里面的JS可以忽略，只有CSS和HTML相关。

我看到很多人问这个问题，我也曾经遇到过，所以我想我应该在这里发布一个全面的答案 :) 不管怎样，解释一下:

HTML:

<div class="wrapper">
    <button id="add-content">Add more content</button>
    <ul class="content">
        <li>I am content, destroyer of worlds</li>
        <li>I am content, destroyer of worlds</li>
        <li>I am content, destroyer of worlds</li>
        <li>I am content, destroyer of worlds</li>
        <li>I am content, destroyer of worlds</li>
    </ul>
    <footer>
        Footer!
    </footer>
</div>

还有 CSS:

body,
html {
    padding: 0;
    margin: 0;
    height: 100%;
}

.wrapper {
    min-height: 100%;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 100px;
}

footer {
    height: 100px;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    width: 100%;
    bottom: 0;
}

因此，内容和页脚周围有一个包装器，因为这是大多数人滚动的方式，但这不是必需的，您实际上可以只使用 body 作为包装器来做到这一点。

现在，需要注意的要点:

• html, body 有一个 height: 100%:默认情况下， block 元素的高度由其内容决定。因此，即使您尝试将页脚放在底部，也可以使用 position: absolute; bottom: 0，它实际上被推到第一个非静态父元素的底部，或者如果没有非静态父元素，则 html 的底部/body 元素。通过设置 height: 100%，我们可以强制 body, html 元素占据整个可用视口(viewport)并忽略内容高度。 (也可以使用min-height: 100%;，不过要看你要支持哪些浏览器)

• .wrapper 有一个 min-height: 100%:在粘性元素和你想要将页脚粘到的元素之间，你想要确保所有元素的高度都为 100%，否则它们会折叠以匹配内容的高度。

• .wrapper 有 box-sizing: border-box; padding-bottom: 100px;:底部的填充是为了确保如果内容被添加到包装器中，它不会最终丢失在粘性页脚后面。此填充应匹配页脚高度，或更大。

• 页脚 有 position: absolute; bottom: 0;:我猜这里不需要解释。下一点其实更重要。

• .wrapper 有position: relative:还记得我说的关于非静态 parent 吗？通过使 .wrapper 成为非静态的，我们确保 footer 保持在 inside .wrapper 中，同时保持粘性。

我认为这已经涵盖了所有内容，但我建议您在 fiddle 中尝试使用相关的 HTML/CSS，以清楚地了解正在发生的事情以及元素如何交互。

P.S.:在查看您的 fiddle 时，我注意到有一个 .wrapper 类，但没有元素？我建议将其添加到 fiddle (并删除页脚 content)，这样可以更容易地找到缺少的内容:)

P.P.S.:查看this fiddle branched from yours ，我在删除所有不必要的 HTML 内容后做了以下修改:

• 在除页脚之外的所有正文内容周围添加了 .wrapper 元素。
• 在 .wrapper 元素的底部添加了 .push 元素
• 从页脚中删除了一堆不必要的 CSS 样式，将定位更改为相对。