用flex置底footer

看过别人写的一些footer置底的文章,试了一些,发现了一个特别简单的置底方式,不用考虑footer的高度,也不用设置padding-bottom啥的,用flex,两步即可。

以下以Rails为例:

一、设置html部分

application.html.erb中的内容:

<!DOCTYPE html>
<html>
  <head>
    .....
  </head>

  <body>
    <div class="content">
      <div class="container-fluid">
        <div class="row">
          <%= render "common/navbar"%>
          <%= yield %>
        </div>
      </div>
    </div>
    <%= render "common/footer"%>
  </body>
</html>

二、设置CSS部分

application.scss中填入:

html {
    height: 100%;
}
body {
  min-height: 100%;                                   // footer固定底部
  display: flex;                                      // footer固定底部
  flex-direction: column;                             // footer固定底部                       
}
.content {
 flex: 1;
}

OK!不管你的footer样式如何,高度几许,都可以完美实现置底。

参考

将footer固定在页面底部的实现方法