Html 我能'；不要让页脚停留在页面底部。

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

然而，我似乎无法让它工作。我不知道我做错了什么。页脚似乎只停留在一个位置。我知道对这里的人来说，你会发现一个明显的错误，很容易纠正。然而，我无论如何都不是一个专业的网页设计师。事实上，这根本不是我的工作。但我总是喜欢学习如何做事，我的网站看起来很棒（至少对我来说）。我就是不能，为了我的生命，找出这个问题的症结所在

我应该从粘贴页面的整个编码开始吗？

我应该从以下内容开始：

    .myStyle{
      position:absolute;
      bottom:0;
   }

---

如果希望页脚在页面上始终可见（即使在滚动时），则需要使用：

position:fixed
有一个著名的粘脚问题。我想我们都曾经路过他们家。
如果你照上面说的做，你会设法做一件正确的事

另一个解决方案是有一个
位置：固定；底部：0px请参见，但这意味着您的页脚将始终显示在内容上。它将是相对于您的窗口而不是页面的位置。
请查看，希望我没有误解您的问题。可以忽略其中的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>

因此，content&footer周围有一个包装器，因为这是大多数人滚动的方式，但这不是必需的，实际上，您可以使用
主体
作为包装器

现在，需要注意的要点是：


html，body
具有
高度：100%
：默认情况下，块元素的高度由其内容决定。因此，即使您尝试使用
position:absolute将页脚定位在底部；底部：0
，它实际上被推到第一个非静态父元素的底部，或者如果没有非静态父元素，则推到
html/body
元素的底部。通过设置
高度：100%
，我们可以强制
主体、html
元素占据整个可用视口并忽略内容高度。（您也可以使用
最小高度：100%；
，但这取决于您要支持的浏览器）

.wrapper
有一个
最小高度：100%
：在粘滞元素和要粘滞页脚的元素之间，要确保所有元素都有100%的高度，否则它们将折叠以匹配内容的高度

.wrapper
具有
框大小：边框框；填充底部：100px：底部的填充是为了确保如果内容被添加到包装器中，它不会最终丢失在粘性页脚后面。此填充应与页脚高度匹配，或更大

页脚
具有
位置：绝对；底部：0：我猜这里不需要解释。下一点实际上更重要

.wrapper
有
位置：relative
：还记得我说过的非静态父项吗？通过使
.wrapper
非静态，我们确保
页脚
保持在
.wrapper
内，同时保持粘性


我认为这就涵盖了它，但我建议您在小提琴中使用相关的HTML/CSS，以便清楚地了解发生了什么以及元素如何交互

p.S.：在查看您的小提琴时，我注意到有一个
.wrapper
类，但没有元素？我建议将其添加到fiddle中（并删除页脚内容），这样可以更容易地跟踪缺少的内容：）

p.p.S.：请检查，在删除所有不必要的HTML内容后，我做了以下修改：


在所有正文内容（页脚除外）周围添加了.wrapper元素
在.wrapper元素的底部添加了.push元素
从页脚中删除了一堆不必要的CSS样式，将定位更改为相对
不要发布所有代码，只发布与页脚相关的代码以及出错的地方，但是是的，你应该发布代码，甚至更好的是，也发布JSFIDLE。我不知道JSFIDLE是什么。是一个让你与他人分享你的代码并让他们轻松使用的网站，所以，我认为这就是你想要的，对吗？我想我已经得到了你要求的所有东西，包括HTML和CSS。编辑这个问题，这样每个人都可以很容易地看到链接！无论如何，我建议你读一下这本指南，当我刚开始的时候，它帮助了我很多，它可能也会帮助你！有很多这样的指南，如果你谷歌“粘性页脚”，你会发现许多不同的技术！当我添加内容时，我实际上希望页脚被向下推，就像不总是在窗口底部，而是总是在页面底部一样。我从其他教程中复制并粘贴了与此相关的代码，但它似乎不起作用。不过，我知道这是我的错。我不想要固定位置的页脚。我想要一个始终位于页面底部（而不是窗口），并在我向页面添加新内容时自动向下推到底部的方法。Ryan Fait方法实际上是我已经在使用的方法。我不知道为什么它不起作用。哦，兄弟。。。好吧，我真的迷路了。我正在努力理解这一切，我只是有点明白而已。如果我发布了我的页面模板的全部代码，你能看一下，看看有什么问题吗
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;
}