sticky footer 布局

<!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 {
100%;
height: 60px;
/* margin-top 为 footer 高度的负值 */
margin-top: -60px;
background-color: yellow;
}
</style>
</head>

</html>