css - 粘性页脚不会粘在动态 Rails 内容下面-6ren

css - 粘性页脚不会粘在动态 Rails 内容下面

转载作者：太空宇宙更新时间：2023-11-03 22:55:28

24

4

这是一个常见问题，首先，让我们来看看为什么我认为这是独一无二的。在阅读了无数答案之后，我看到了一些创建粘性页脚的不同策略——所有这些策略都需要将 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/

24

4

0

文章推荐： c# - AutoMapper 混淆 ChangeTracker

文章推荐： c# - 一段时间后如何隐藏微调器？

文章推荐： c# 重载方法的泛型函数

css - IE7 输入定位错误(粘!)
查看此页面:http://jsbin.com/itufix使用 IE(页面自动启用 IE7 模式)。在这里您将找到如何使用显示 block 呈现内联元素(输入和跨度)的示例。所有元素的边距和填充都设
ios - 在自定义 UITableviewCell 中设置图像不会*粘*
我有一个自定义的 UITabvleViewCell，其中有一个 UIImageView。当在 cellForRowAtIndexPath 中设置单元格时，我可以很好地设置图像(尽管我没有)，但是在某些

首页

博学

6Ren·AI

商城

css - 粘性页脚不会粘在动态 Rails 内容下面