Question

这是一个常见的问题，首先是关闭，所以让我们看看为什么我认为这是独一无二的。在阅读了大量答案之后，我已经看到了一些创建粘性页脚的不同策略 - 所有这些都需要将CSS中的html, body设置为100％，然后将页脚放在下面。

此粘性页脚应位于我的Rails应用程序中的页面内容下方。因此，将存在比视口运行更长的动态内容（即博客帖子）的实例。

我的粘性页脚在任何具有静态内容（或者不需要滚动）的页面上都能很好地工作，但会始终将自己置于初始视图的末尾，这使得它看起来像是在滚动时页面的中间部分。我不能使用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后将其放置在中。

Answer 1

其中一个容器.special中的内容已浮动。在这种情况下，容器不了解此容器中有多大（所有的总高度）。

如果你浮动元素，他们不再 <正常文档流程中的。要解决此问题，您必须将clearfix添加到容器中。

将overflow: hidden添加到课程.special应该这样做。

粘性页脚不会粘在动态Rails内容之下

1 个答案: