stiky footer方案总结

发表于 | 阅读次数

前言

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

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

方案

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

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

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

1
2
3
4
<div class="container">
    <div class="main">main</div>
    <div class="footer">footer</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

.main {
  flex: 1;
}

.footer {
  background: #ccc;
}

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

利用定位固定在底部

1
2
3
4
<div class="container">
    <div class="main">main</div>
    <div class="footer">footer</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 *{
    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

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

1
2
3
4
<div class="container">
    <div class="main">main</div>
    <div class="footer">footer</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
*{
    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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
*{
    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不自适应了
1
2
3
4
<div class="container">
    <div class="main">main</div>
    <div class="footer">footer</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
*{
    margin: 0;
    padding: 0;
}

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

.footer {
    height: 24px;
}

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

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