5 months ago

在做魔改大赛的时候,按照教程完成后,footer有个总是会根据页面内容多少来变化,论坛中有很多方法,如如何让footer不『乱跑』? 以及nic老师也出了一个版本。

注:实现方法很多,请根据自己的喜好去选择就好。

下面提供另外一个版本。实现footer最低部有两个要求:1,页面内容很多时,footer自动被挤到最下面,2,如果页面并没有占满整个页面,则footer在当前页面的最下方。
修改之前的样式

修改后的样式:

Snip20170423_8.png2626x1406 129 KB
1,app/views/layouts/application.html.erb中有一段代码如下(如果是按照教程来的话是这样,如果自己有修改,可能会不一样):




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

      <%= render "common/footer" %>


将其修改为:





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


      <%= render "common/footer" %>


Snip20170423_14.png1986x636 63 KB
2, app/views/layouts/admin.html.erb中有一段代码如下(如果是按照教程来的话是这样,如果自己有修改,可能会不一样):





<%= render "common/footer" %>
</body>

将其修改为如下:




        </div>
    </div>
    <%= render "common/footer" %>

</body>

3,在app/assets/stylesheets/application.scss加入以下内容:

html { height: 100%;}
body { min-height: 100%; display: flex; flex-direction: column;}
.content { flex: 1;}

← orid 扣分按钮 →