前言

在开发过程中，我们总有类似于下面的需求

• 页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。
• 又或者整个内容占满一页，页脚块粘贴在视窗底部，上面内容可滑动（一般出现在移动端）

方案

废话不多说，上干货，大致有以下几种方法

• 利用flex
• 利用绝对定位
• 利用负margin
• 利用calc
• 利用grid

flex实现stiky footer

利用flex:1撑开剩下的空间

<div class="container">
    <div class="main">main</div>
    <div class="footer">footer</div>
</div>

*{
  margin: 0;
  padding: 0;
}
.container {
  /* 这里为了方便演示，实际情况下要考虑移动端输入键盘压缩的情况 */
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: greenyellow;
}

.main {
  flex: 1;
}

.footer {
  background: #ccc;
}

• 优点：简直不要太赞，布局简单，还自适应
• 缺点：不支持flex的直接gg

绝对定位实现stiky footer

利用定位固定在底部

<div class="container">
    <div class="main">main</div>
    <div class="footer">footer</div>
</div>

 *{
    margin: 0;
    padding: 0;
}
.container {
    position: relative;
    height: 100vh;
    box-sizing: border-box;
    padding-bottom: 24px;
    background: red;
}

.footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    background: blue;
}

• 优点：适用范围广，兼容性好
• 缺点：footer不自适应了

利用负margin

和定位类似，也是利用某种方式固定在底部

<div class="container">
    <div class="main">main</div>
    <div class="footer">footer</div>
</div>

*{
    margin: 0;
    padding: 0;
}
.container {
    height: 100vh;
}
.main{
    min-height: 100%;
    box-sizing: border-box;
    padding-bottom: 24px;
    margin-bottom: -24px;
}

.footer {
    height: 24px;
}

可以给main加marign,当然也可以给footer加marin噻，O(∩_∩)O

*{
    margin: 0;
    padding: 0;
}
.container {
    height: 100vh;
}
.main{
    min-height: 100%;
    box-sizing: border-box;
    padding-bottom: 24px;
}

.footer {
    margin-top: -24px;
    height: 24px;
}

• 优点：适用范围广，兼容性好
• 缺点：footer不自适应了

利用calc实现stiky footer

<div class="container">
    <div class="main">main</div>
    <div class="footer">footer</div>
</div>

*{
    margin: 0;
    padding: 0;
}

.main{
    box-sizing: border-box;
    height: calc(100vh - 24px);
}

.footer {
    height: 24px;
}

优点：好像没有。。。 缺点：貌似挺多的，calc兼容性啊，footer不自适应啊

利用grid实现stiky footer

略，这里偷个小懒，其实和flex差不多，具体参考gird布局就好了。O(∩_∩)O