本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer，已开源在github ，欢迎star！
本文介绍底部footer元素如何始终粘在浏览器底部。当内容container足够多、可以撑开一屏的时候，底部footer紧跟在内容container后边；而内容container不够多、不足以撑开一屏到达浏览器底部时，底部footer仍然在浏览器底部。需求看下图：（原谅我用了简单粗暴的三原色￣□￣｜｜）
注：文中所有关键代码写在了 /* key code */里，背景色background-color为辅助调试代码，没有实质用途。
方法一
html和body设置height为100%；用一个包裹元素wrapper包住除了底部footer之外的所有内容container，给包裹元素wrapper设置min-height为100%、设置负的margin-bottom等于底部footer的高度；内容container后加一个空的占位元素blank，高度和底部footer一样，防止底部footer盖住内容container。
HTML代码:
body
div class="wrapper"
div class="container"container/div
div class="blank"/div
/div
/body
CSS代码：
html,
body {
/* key code */
height: 100%;
/* key code */
margin: 0;
text-align: center;
}
.wrapper {
/* key code */
min-height: 100%;
margin-bottom: -50px;
/* key code */
}
.container {
background-color: #ff0000;
}
.blank, .footer {
/* key code */
height: 50px;
/* key code */
}
.blank {
background-color: #0000ff;
}
.footer {
background-color: #ffff00;
}
方法二
内容container设置padding-bottom等于底部footer的高度，底部footer设置负的margin-top等于底部footer的高度。
html和body设置height为100%；用一个包裹元素wrapper包住除了底部footer之外的所有内容container，给包裹元素wrapper设置min-height为100%；内容container设置padding-bottom等于底部footer的高度；底部footer设置负的margin-top等于底部footer的高度。
HTML代码:
body
div class="wrapper"
div class="container"container/div
/div
div class="footer"footer/div
/body
CSS代码：
html,
body {
/* key code */
height: 100%;
/* key code */
margin: 0;
text-align: center;
}
.wrapper {
/* key code */
min-height: 100%;
/* key code */
}
.container {
/* key code */
padding-bottom: 50px;
/* key code */
background-color: #ff0000;
}
.footer {
/* key code */
height: 50px;
margin-top: -50px;
/* key code */
background-color: #ffff00;
}
方法三
使用flexbox布局。
html设置height为100%；body使用flexbox布局、设置min-heigint为100%；内容container设置flex为1，意在内容container分配body除去底部footer后的全部剩余空间。
HTML代码:
body
div class="container"container/div
div class="footer"footer/div
/body
CSS代码：
html,
body {
margin: 0;
text-align: center;
}
html {
/* key code */
height: 100%;
/* key code */
}
body {
/* key code */
min-height: 100%;
display: flex;
flex-direction: column;
/* key code */
}
.container {
/* key code */
flex: 1;
/* key code */
background-color: #ff0000;
}
.footer {
height: 50px;
background-color: #ffff00;
}
方法四
html设置height为100%；使用calc()计算内容container的最小高度，设置内容container的min-height为（100vh - 底部footer的高度)。
HTML代码:
body
div class="container"container/div
div class="footer"footer/div
/body
CSS代码：
html,
body {
/* key code */
height: 100%;
/* key code */
margin: 0;
text-align: center;
}
.container {
/* key code */
min-height: calc(100vh - 50px);
/* key code */
background-color: #ff0000;
}
.footer {
/* key code */
height: 50px;
/* key code */
background-color: #ffff00;
}
方法三和方法四用到了CSS3的新属性，会有部分低版本浏览器不支持。
dvdf
始发于微信公众号： 前端麻辣烫
