在网页设计中， Sticky footers 设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。这种效果不仅是无处不在，很受欢迎，而且实现起来看上去也非常容易。
有的盆友就说了，我可以使用 position: fixed;bottom:0;
当然有些情况下是可以适用的，但是有些情况下并不适用，使用 fixed 不就反而更糟，再说了，像我们这样的喜欢新技（zhuang）术（B）的人，有使用新技（zhuang）术（B）的机会怎么能放过。
之前分享过一期网站 footer 沉底效果的解决方案，用的是 JS 或者采用 flex 布局，更利于 PC 端。今天分享下便于移动端的最佳套路。
当然市面上的一些解决方案，但多少都有些兼容性问题存在，这当然不是我们追求的，分享下实现的源码，有兴趣的私下里可以试一试。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
| <style>
* {
padding: 0;
margin: 0;
}
.box {
color: #fff;
background: #ccc;
}
.box {
color: #fff;
position: fixed;
top: 0;
left: 0;
overflow: auto;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(7, 17, 27, 0.6);
}
.clearfix {
display: inline-block;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
line-height: 0;
clear: both;
visibility: hidden;
}
.box-wrapper {
min-height: 100%;
}
.box-main {
margin-top: 64px;
padding-bottom: 64px;
width: 90%;
margin: 10px auto;
}
.box-close {
position: relative;
height: 32px;
width: 32px;
margin: -64px auto 0 auto;
font-size: 32px;
}
.box-close i {
font-style: normal;
}
</style>
<div class="box">
<div class="box-wrapper clearfix">
<div class="box-main">
<p>
移动前端中常说的 viewport
（视口）就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip （
device-independent pixel 设备逻辑像素 ）和 CSS
像素之间的关系。这里首先了解以下几个概念。
</p>
<p>
移动前端中常说的 viewport
（视口）就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip （
device-independent pixel 设备逻辑像素 ）和 CSS
像素之间的关系。这里首先了解以下几个概念。
</p>
<p>
移动前端中常说的 viewport
（视口）就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip （
device-independent pixel 设备逻辑像素 ）和 CSS
像素之间的关系。这里首先了解以下几个概念。
</p>
<p>
移动前端中常说的 viewport
（视口）就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip （
device-independent pixel 设备逻辑像素 ）和 CSS
像素之间的关系。这里首先了解以下几个概念。
</p>
</div>
</div>
<div class="box-close">
<i>X</i>
</div>
</div>
|
- 1、 .box 里面分为两部分 .box-main 和 .box-close ；
- 2、 .box-wrapper 高度要是屏幕的高度； 要清除浮动 这里加了一个 class .clearfix ；
- 3、 .box-main 一定要预留出 .box-close 元素的部分，这里使用的是 padding-bottom;
- 4、 .box-close 要负 margin-top,抵消 .box-main 的 padding-bottom;
- 5、 上面四点很重要
只要遵守上面的四点就能很轻易地实现一个 Sticky Footer。
此方案可以解决大部分设备的兼容性问题，可以说是目前兼容性最好的方案（之一吧）。
