<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
margin:0;
padding: 0;
}
html,body{
height: 100%;
}
#container{
width: 100%;
min-height: 100%;
padding-bottom: 50px; /*底部空出50px，放footer*/
position: relative;
box-sizing: border-box; /*效果：padding后不改变其宽高*/
}
.nav{
/*最上面的div不能有margin-top，不然会造成整个body下移*/
width: 100%;
height: 50px;
background-color: blue;
}
.main{
width: 100%;
height: 400px;
background-color: red;
}
.footer{
height:50px;
background-color: yellow;
position: absolute; /*相对于#container固定定位*/
left: 0;
bottom: 0;
width: 100%;
}
</style>
<body>
<div id="container">
<div class="nav"></div>
<div class="main"></div>
<div class="footer"></div>
</div>
</body>
</html>
