在写html页面布局的时候经常会遇到这样的情况：当页面内容较少的时候footer下面会有留白这样会很不好看，直接给footer，fixed定位的话当页面内容多的时候，footer又会盖住下面的内容。下面介绍几种方法让页面的footer始终位于底部。
方法一：position: absolute; bottom:0; + min-height: 100%;padding-bottom:100px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding:0;
margin:0
}
html,body{
height: 100%;
}
.page{
box-sizing: border-box;
min-height: 100%;
position: relative;
padding-bottom:100px;
}
header{
height: 60px;
background: #333;
}
.content{
background: #666;
/*height: 1000px;*/
}
footer{
width: 100%;
height: 100px;
background: #aaa;
position: absolute;
bottom:0;
left: 0;
}
</style>
</head>
<body>
<div class="page">
<header> 头部 </header>
<div class="content">
<p class="内容区"></p>
</div>
<footer> 底部 </footer>
</div>
</body>
</body>
</html>
方法二:其实是对方法一做一些改造，html结构和方法一中的一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding:0;
margin:0
}
html,body{
height: 100%;
}
.page{
min-height: 100%;
position: relative;
}
header{
height: 60px;
background: #0d6aad;
}
.content{
background: #00c7a6;
/*height: 1000px;*/
padding-bottom:100px;
}
footer{
width: 100%;
height: 100px;
background: #1ab7ea;
opacity: 0.6;
position: absolute;
bottom:0;
left: 0;
}
</style>
</head>
<body>
<div class="page">
<header> 头部 </header>
<div class="content">
<p class="内容区"></p>
</div>
<footer> 底部 </footer>
</div>
</body>
</body>
</html>
方法三：使用flexbox布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding:0;
margin:0
}
html,body{
height: 100%;
}
.page{
display: flex;
flex-direction: column;
height: 100%;
}
header{
height: 100px;
background: #333;
flex: 0 0 auto;
}
.content{
background: #666;
flex: 1 0 auto;
/*height: 1000px;*/
}
footer{
height: 100px;
background: #999;
flex: 0 0 auto;
}
</style>
</head>
<body>
<div class="page">
<header> 头部 </header>
<div class="content">
<p class="内容区"></p>
</div>
<footer> 底部 </footer>
</div>
</body>
</body>
</html>
