如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 48px;
}
/*第一步设置盒子为满屏大小*/
.box {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: auto;
background: green;
}
/*第二步子盒子设置最小高度且清除浮动,给一个padding-bottom等于footer避免内容被footer遮盖*/
.main {
width: 100%;
min-height: 100%;
padding-bottom: 100px;
}
.content {
background: orange;
}
/*第三步footer的高度和margin-top要相等*/
.footer {
position: relative;
width: 100%;
height: 100px;
background: #f3f3f3;
margin: -100px auto 0 auto;
clear: both;
text-align: center;
line-height: 100px;
}
.clearfix {
display: inline-block;
}
.clearfix::after {
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="main clearfix">
<div class="content">
<p>这是 一段话</p>
<p>这是 一段话</p>
<p>这是 一段话</p>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>