方法一：给html、body都设置100%的高度，确定body下内容设置min-height有效，然后设置主体部分min-height为100%，此时若没有header、footer则刚好完美占满全屏（参考《div绝对居中、宽高自适应、多栏宽度自适应》），但是有了这两个，只能另寻他路，由于高版本浏览器对box-sizing的支持，我们可以在100%的高度中通过padding给header、footer空出两部分空白区域，再通过给header设置等同于自身高度的负值margin-bottom，给footer设置等同于自身高度的负值margin-top，就完美的把两者移回可见区域，如此以来，既满足content部分不满一屏时footer在底部，又满足了，超过一屏时footer被撑开的需求。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>footer始终处在底部</title>
</head>
<style>
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
html,body { height: 100%;}
header {
height: 60px;
margin-bottom: -60px;
background: #1381cc;
color: #FFF;
position: relative;
}
section {
background: #fff;
min-height: 100%;
padding: 60px 0 60px;}
footer {
height:60px;
margin-top: -60px;
background: #0c4367;
color: #FFF;
} </style>
<body>
<header></header>
<section class="content">
<div style="height:1000px;"></div>
</section>
<footer class="footer"></footer>
</body>
</html>
方法二：将footer以外的部分再用wrap包裹起来，内部设置padding-bottom，footer相同的使用margin-top，如此以来不用使用border-box；
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>footer始终处在底部</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
html,body { height: 100%;}
.wrap{
min-height: 100%;
}
.min{
padding-bottom: 60px;
}
header {
height: 60px;
background: #1381cc;
color: #FFF; }
section {
background: #fff;
}
footer {
height:60px;
margin-top: -60px;
background: #0c4367;
color: #FFF;
} </style>
<body>
<div class="wrap">
<div class="min">
<header></header>
<section class="content">
<div style="height:10px;"></div>
</section>
</div>
</div>
<footer class="footer"></footer>
</body>
</html>
方法三：也是最简单的方法。
html {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
如果大家用这几种方法有产生什么弊端，请回复大家一起交流哦！
了解更详细的内容可以访问：http://www.waigai.cn