无论是pc还是移动端，有一种布局叫做Sticky footers，何为Sticky footers？百度翻译：“粘粘的页脚”[笑哭],
不过意思也算对吧，就是如果页面内容不够长的时候，页脚粘贴在视窗底部；如果内容足够长时，页脚块会附在内容区块下面。那么如何来实现这种效果呢，今天来用两种方式聊一聊。
实现原理
1.利用包裹层，用高度100%来实现
2.利用flex + 高度100vh来实现
第一种方式
设置body的高度为100%，然后设置设置内容容器的最小高度为100%，然后设置负的margin-bottom，负值为页脚高度，然后利用伪类，利用容器的after占位。
html,body {
height: 100%;
}
.page-wrap{
min-height: 100%;
margin-bottom: -142px;
}
.page-wrap:after {
content: '';
display: block;
}
footer,.page-wrap:after {
height: 142px;
}
----------------------------------
<body>
<div class="page-wrap"></div>
<footer></footer>
</body>第二种方式
首先提一个概念：vh ：相对于视窗的高度：视窗高度是100vh。
将body设置为 display:flex; 这时你会发现页面的布局变成了横向布局，因为flex布局默认主轴方向为 row ，即横向。然后利用 flex-flow: column; 将主轴方向设置为垂直方向。关于flex的语法，推荐阮一峰老师的blogFlex 布局教程：语法篇,
然后设置内容容器flex: 1。
这里稍微介绍一下flex: 1flex: 1 等同于 flex: 1 1 0%,即等价于flex-grow: 1; flex-shrink: 1;flex-basis: 0%;前两个根据阮老师的教程很好理解，那么第三个flex-basis: 0%是什么意思呢？flex-basis有三种取值情况：
1.auto: 先检索该元素的尺寸，如果不为auto，则取固定值；如果也是auto，则取值content
2.content: 指该元素的内容自动布局。
3.百分比: 根据其父容器的尺寸计算。如果父容器的尺寸未定义，则取值和设为auto相同。
所以，设置为 flex: 1 之后，内容容器内容高度小于父容器时，则取父容器高度，如果大于父容器高度时则取内容高度。
理解了上面这些之后，下面是实现的一个简单例子。
body{
display: flex;
flex-flow: column;
min-height: 100vh;
}
main {
flex: 1;
}
-----------
<body>
<header></header>
<main></main>
<footer></footer>
</body>移动端实现
在开发移动端时，可能会有点击某个按钮，显示全屏遮罩层，如果内容过多，则出现滚动条，关闭按钮在最下面。这种需求刚好符合Stciky footers。遮罩层，我们一般常使用fix布局。提供一种增加包裹层实现方式。
遮罩层position:fixed，然后包裹层最小高度设为min-height: 100%，内容容器设置padding-bottom: 30px页脚提供位置。页脚采用margin-top: -30px来定位，同时注意清除浮动的使用。
.parent {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
}
.main-wrapper {
width: 100%;
min-height: 100%;
}
.main {
padding-bottom: 30px;
}
.footer {
height: 30px;
width: 100%;
position: relative;
margin-top: -30px;
clear: both;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
-------------------
<div class="parent">
<div class="main-wrapper clearfix">
<div class="main">
<p>123</p>
</div>
</div>
<div class="footer">
123
</div>
</div>有更多实现技巧或建议，欢迎留言交流~
博客原文:(http://fehey.com/2016/11/20/s...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。