stricky footer | 易学教程

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

来源：CSDN

作者：liuhua_2323

链接：https://blog.csdn.net/liuhua_2323/article/details/104068018

标签