stricky footer设计是最古老和最常见的效果之一，我们都曾经历过类似的情景：
如果页面内容不够长的时候，页脚块粘贴在底部；如果内容足够长时，页脚块会被内容向下推送。
最近做demo的时候跟着大佬认识了stricky footer，下来查阅了相关资料，在此记录一下：
上图底部的 x 就用到了经典的stricky footer，单页面内容足够时，它会向下推送；当页面内容没有撑满整个屏幕时，它就固定在底部。
而不是像下图这样：
正是由于上述问题的存在，所以经典的stricky footer出现了。话不多说，下面直接进入主题
解决方案
stricky footer主要有三种解决方案，这里我提供两种比较简单的方式，下面我们先构建一点简单的代码
<body>
<div class="content"></div>
<div class="footer"></div>
</body>1.为内容区域添加最小的高度
这个方法主要是用视口vh来计算整体视窗的高度，然后减去底部footer的高度，从而得出内容区域的最小高度
.content{
min-height:calc(100vh - `footer的高度`);
box-sizing:border-box;
}这种方法很简单，但是如果页面的footer高度不同，每个页面都要重新计算一次，所以并不推荐
2.使用flex布局
body{
display:flex;
flex-flow:column;
min-height:100vh;
}
.content{
flex:1;
}
.footer{
flex:0;
}footer的flex为0，这样flex获得其固有的高度；content的flex为1。这样它会充满除去footer的其余部分 ，这种方法较为推荐
过年了，祝各位大佬们新年快乐，2020干翻马化腾！！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
