刘华佼的全栈学习记录

footer置底的最简方法

| Comments

折腾这个footer已经不是一天两天了。

试过教程如何让footer不『乱跑』?让footer固定在最下方都没成功,看着帖子下面一大片说按照教程做出来了,我开始严重怀疑自己的人品问题。

今天又折腾了两个小时,把教程让footer固定在最下方的相关源代码完全抄下来,还是不行。崩溃之余上slack请求助教支援。

caven助教三言两语帮忙解决了,感谢无以言表,强烈建议slack出一个打赏功能!

废话说完,切入正题。

让footer置底的最简单方法:

步骤1:

在app/views/_footer.html.erb里的footer class里加上navbar-fixed-bottom:

我的是这样的:

<footer class="text-center navbar-fixed-bottom">
        <p class="text-center">Copyright ©2017
            <br>Design by 刘华佼
        </p>
</footer>

步骤2-1:加入:style="margin-bottom: 100px;"

然后在app/views/layouts/application.html.erb中,footer上方的主体框架上加入:

style="margin-bottom: 100px;"

我的footer上方的css是自定义的“main”(就是footer那条语句上面对应的那个class):

  <body>
    <div class="main" style="margin-bottom: 100px;">
      <div class="container-fluid">
        <div class="row">
           <%= render "common/navbar" %>
           <%= render "common/flashes" %>
           <%= yield%>
           </div>
       </div>
    </div>

         <%= render "common/footer" %>

  </body>

步骤2-2:class main中加"margin-bottom: 100px;"

你也可以不在application.html.erb里加style="margin-bottom: 100px;",而改在app/assets/stylesheets/application.scss里的main class里加上margin-bottom: 100px;

.main {
  margin-bottom: 100px;
}

main是我自己定义的class名字,你也可以改其他名字,但要和application.html.erb里引用的名字一致。

这样就可以将footer置底了!

效果图:

步骤3:修改footer背景色和字体颜色

背景色和字体颜色可以在app/assets/stylesheets/application.scss里自己设置,我的是这样的:

footer {
  height: 100px;
  background-color: #414a60;
  p {
    padding-top: 30px;
    padding-bottom: 30px;
    color: white;
  }
}

你可以将这里面的background-color和p里面的color改成你喜欢的其他颜色。

最后步骤:敲黑板!看重点!

如果这篇教程对你有帮助, 请为我的作品投上一票!谢谢啦!

免费用户如果想购买VIP课程,可以使用我的专属推荐码减学费哦:6194-e895-58cb

扩展阅读

点击此处搜索"Fixed to bottom"

Comments

comments powered by Disqus