看过别人写的一些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样式如何,高度几许,都可以完美实现置底。