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;
}

所以，内容＆amp;页脚周围有一个包装器，因为这是大多数人滚动的方式，但它并不是必需的，你实际上只需使用body作为包装器即可。

现在，要注意的要点：

html, body有height: 100%：默认情况下，块元素的高度由其内容决定。因此，即使您尝试使用position: absolute; bottom: 0将页脚放在底部，它实际上也会被推到第一个非静态父元素的底部，或者如果没有非静态父元素，html/body元素的底部。通过设置height: 100%，我们可以强制body, html元素占用整个可用视口并忽略内容高度。（您也可以使用min-height: 100%;，但这取决于您要支持的浏览器）
.wrapper有一个min-height: 100%：在粘性元素和要粘贴页脚的元素之间，你要确保所有元素都有100％的高度，否则它们会＃39 ; ll折叠以匹配内容的高度。
.wrapper有box-sizing: border-box; padding-bottom: 100px;：底部的填充是为了确保如果内容被添加到包装器中，它就不会丢失粘性页脚。此填充应与页脚高度匹配，或者更大。
footer有position: absolute; bottom: 0;：这里不需要解释，我猜。下一点实际上更重要。
.wrapper有position: relative：还记得我对非静态父母所说的话吗？通过使.wrapper非静态，我们确保footer在 .wrapper内保持，同时保持粘性。

我认为这涵盖了它，但我建议在小提琴中使用相关的HTML / CSS来清楚地了解正在发生的事情以及元素如何相互作用。

P.S。：在通过你的小提琴时，我注意到那里有一个.wrapper类，但没有元素？我建议将其添加到小提琴（并删除页脚内容），这样可以更容易找到缺少的内容：）

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

在除页脚之外的所有正文内容周围添加了.wrapper元素。

在.wrapper元素底部添加.push元素

从页脚中删除了一堆不必要的CSS样式，将定位更改为相对。

Answer 2

我会从：

开始

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

如果您希望页面上始终显示页脚（即使滚动时），您还需要使用：position:fixed;

Answer 3

哈哈着名的粘性页脚问题。我想我们都曾经过他们的。如果你这样做那里＆gt; http://ryanfait.com/sticky-footer/你将成功做到一个。

另一个解决方案是让position:fixed; bottom:0px;看this fiddle，但这意味着您的页脚将始终显示在内容上。它将相对于您的窗口而不是您的页面位置。

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

3 个答案: