本文介绍底部footer元素如何始终粘在浏览器底部。当内容container足够多、可以撑开一屏的时候，底部footer紧跟在内容container后边；而内容container不够多、不足以撑开一屏到达浏览器底部时，底部footer仍然在浏览器底部。需求看下图：(原谅我用了简单粗暴的三原色￣□￣｜｜)

注：文中所有关键代码写在了/* key code */里，背景色background-color为辅助调试代码，没有实质用途。

方法一

包裹元素wrapper设置负的margin-bottom等于底部footer高度，内容container后加一个空的占位元素blank。

html和body设置height为100%；用一个包裹元素wrapper包住除了底部footer之外的所有内容container，给包裹元素wrapper设置min-height为100%、设置负的margin-bottom等于底部footer的高度；内容container后加一个空的占位元素blank，高度和底部footer一样，防止底部footer盖住内容container。

HTML代码:

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代码:

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代码:

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;

}

方法四

使用calc()计算内容container的最小高度。

html设置height为100%；使用calc()计算内容container的最小高度，设置内容container的min-height为(100vh - 底部footer的高度)。

HTML代码:

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