这是一个常见问题，首先，让我们来看看为什么我认为这是独一无二的。在阅读了无数答案之后，我看到了一些创建粘性页脚的不同策略——所有这些策略都需要将 CSS 中的 html, body 设置为 100%，然后将页脚放置在下方。
这个粘性页脚应该位于我的 Rails 应用中页面内容的下方。因此，动态内容(即博客文章)的实例将比视口(viewport)运行时间更长。
我的粘性页脚在任何包含静态内容(或不需要滚动)的页面上都能很好地工作，但会始终将自己放在初始 View 的末尾，这使得它在滚动时看起来像是在页面中间.我不能 Codepen 因为帖子是动态的，但这里有一个 example of this on Heroku .
在我的 CSS 中，我像这样控制页面换行和页脚:
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -160px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
margin-top: 10px;
height: 160px;
}
.site-footer {
background: #002b52;
}
然后在我的application.html.erb中，我是这样设置的:
<body>
<%= render 'layouts/header' %>
<div class="page-wrap">
<%= yield %>
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
</body>
好消息是页脚不必是动态的 - 将高度设置为等于页面换行完全没问题。我只需要确保它被放置在 动态内容之后 添加到 DOM 中。
最佳答案
其中一个容器 .special 中的内容是 float 的。在这种情况下，容器不了解该容器中的元素有多大(所有元素的总高度是多少)。
如果您 float 元素，它们不再在正常文档流中。要解决此问题，您必须添加 clearfix到容器。
将 overflow: hidden 添加到类 .special 应该可以。
关于css - 粘性页脚不会粘在动态 Rails 内容下面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38606464/