在一般的页面中，footer应该是置于内容底部，如果内容高度不足，也应该让footer紧贴底部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
body,html{height: 100%;}
.detail{height:100%;background:#ddd;width: 100%;overflow:auto;}
.detail-wrapper{width:100%;min-height: 100%;}
.detail-main{margin-top: 64px;padding-bottom: 64px;}
p{word-wrap: break-word;}
.clearfix{display: inline-block;}
.clearfix:after{
display: block;content: '';height: 0;line-height: 0;clear: both;visibility: hidden;
}
.footer{text-align:center;margin:-64px auto 0;width: 32px;}
</style>
</head>
<body>
<div class="detail"><!-- 首先需要让最外层容器的宽高为100%，并且可以随内容高度自动滚动 -->
<div class="detail-wrapper clearfix"><!-- 内层容器我们需要设置的是最小高度为100%，目的是让内容不足时，也至少能充满整个屏幕 -->
<div class="detail-main"><!-- 这一层容器的主要作用是为footer预留空间 -->
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
</div>
<div class="footer"><!-- 这里需要让footer的往上移动，填充到上面为footer预留的位置上 -->
footer
</div>
</body>
</html>
使用flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
body,html{height: 100%;}
.wrap{display: flex;flex-direction: column;min-height: 100%;}
.content{flex: 1;}
.footer{text-align:center;flex: 0;}
</style>
</head>
<body>
<div class="wrap">
<div class="content">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
