【魔改分享】两步让你的footer乖乖置底!只需要CSS

写在前面:

  • 网上教程很多,想找到简单粗暴的,没几个。
  • 大多利用js辅助,不稳定。
  • 这是我找到的最简单粗暴的方法,现在分享给大家。

实作:

  1. 去到app/views/layouts/application.html.erb 把

    整个替换成以下代码:





    <%= render "common/navbar" %>

    <%= render "common/flashes" %>
    <%= yield %>


    <%= render "common/footer" %>
  2. 增加css, 去到app/assets/stylesheets/application.scss 增加以下代码:

    html, body {
    height: 100%;
    margin: 0;
    }
    .body-content {
    min-height: 100%;
    padding-bottom: 60px;
    }
    .footer {
    height: 60px;
    margin-top: -60px;
    }

可以了,收工!

希望你5票投我1票:

这是我的魔改大赛作品:【全栈小伙伴求职网】https://fullstack.xinshengdaxue.com/works/345

comments powered by Disqus