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

发表于 |

写在前面：

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

实作：

  1. 去到app/views/layouts/application.html.erb 把<body></body> 整个替换成以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
<body>
  <div class="container-fluid body-content">
    <div class="content-inside">
      <div class="row">
        <%= render "common/navbar" %>
      </div>
      <%= render "common/flashes" %>
      <%= yield %>
    </div>
  </div>
  <%= render "common/footer" %>
</body>
  1. 增加css， 去到app/assets/stylesheets/application.scss 增加以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
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