html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}不过这种方法和上一种一样，都需要额外添加不必要的html元素。
3. 使用flexbox弹性盒布局
以上三种方法的footer高度都是固定的，通常来说这不利于网页布局：内容会改变，它们都是弹性的，一旦内容超出固定高度就会破坏布局。所以给footer使用flexbox吧，让它的高度可以变大变小变漂亮~（≧∇≦）
content
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
你还可以在上面添加header或在下面添加更多元素。可从以下技巧选择其一：
flex: 1 使内容（如：.content）高度可以自由伸缩
margin-top: auto
请记住，我们有《Flexbox完整指南（英） 》呢～
4. absolute
通过绝对定位处理应该是常见的方案，只要使得页脚一直定位在主容器预留占位位置。
html, body {
height: 100%;
}
.wrapper {
position: relative;
min-height: 100%;
padding-bottom: 50px;
box-sizing: border-box;
}
.footer {
position: absolute;
bottom: 0;
height: 50px;
}
这个方案需指定 html、body 100% 的高度，且 content 的 padding-bottom 需要与 footer 的 height 一致。
5. calc
通过计算函数 calc 计算（视窗高度 - 页脚高度）赋予内容区最小高度，不需要任何额外样式处理，代码量最少、最简单。
.content {
min-height: calc(100vh - 50px);
}
.footer {
height: 50px;
}
如果不需考虑 calc() 以及 vh 单位的兼容情况，这是个很理想的实现方案。同样的问题是 footer 的高度值需要与 content 其中的计算值一致。
6. table
通过 table 属性使得页面以表格的形态呈现。
html, body {
height: 100%;
}
.wrapper {
display: table;
width: 100%;
min-height: 100%;
}
.content {
display: table-row;
height: 100%;
}
需要注意的是，使用 table 方案存在一个比较常见的样式限制，通常 margin、padding、border 等属性会不符合预期。笔者不建议使用这个方案。当然，问题也是可以解决的：别把其他样式写在 table 上。
7. 使用Grid网格布局
grid比flexbox还要新很多，并且更佳很简洁，我们同样有《Grid完整指南（英） 》奉上～
content
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
}
遗憾的是，网格布局（Grid layout）目前仅支持Chrome Canary和Firefox Developer Edition版本。
感谢你能够认真阅读完这篇文章，希望小编分享的“CSS如何实现Sticky Footer”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
文章标题：CSS如何实现StickyFooter
地址分享：http://cdkjz.cn/article/pspsge.html
