<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title>Document</title>
<style>
html,
body {
margin:0;
padding:0;
height: 100%;
}
body>.wrap {
min-height: 100%;
}
.content {
/* padding-bottom 等于 footer 的高度 */
padding-bottom: 60px;
background-color: red;
}
p{
margin:0;
padding:0;
height: 30px;
background-color: blue;
}
.footer {
width: 100%;
height: 60px;
/* margin-top 为 footer 高度的负值 */
margin-top: -60px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">
<p>填充内容</p>
<p>填充内容</p>
<p>填充内容</p>
<p>填充内容</p>
<p>填充内容</p>
<p>填充内容</p>
</div>
</div>
<div class="footer">
这是页脚
</div>
</body>
</html>
