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干翻马化腾!!