css实现：
1）页面内容不够长的时候,页脚块显示在视窗底部
2）如果内容足够长时,页脚块会被内容向下顶
效果图：
内容很多页面出现滚动.png
内容很少.png
可能有人会说直接用定位呀，因为定位实现效果不太理想，哈哈~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html, body {
height: 100%;
overflow: auto;
}
.clearfix {
display: block;
}
.clearfix:after {
display: block;
content: ".";
height: 0;
line-height: 0;
clear: both;
visibility: hidden;
}
.content-wrapper {
min-height: 100%;
}
.content-wrapper p:last-child{
background: yellow;
margin-bottom: 160px;
}
.btn {
position: relative;
width: 200px;
line-height: 60px;
margin: -100px auto 20px auto;
margin-top: -100px;
clear: both;
font-size: 32px;
border: 1px solid #000;
text-align: center;
background: #4cae4c;
}
</style>
</head>
<body>
<div class="content-wrapper clearfix">
<p style="height: 200px;background: #15c6ff">
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</p>
<p style="height: 200px">
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</p>
<p style="height: 200px;background: #15c6ff">
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</p>
<p style="height: 200px">
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</p>
<p style="height: 200px;background: #15c6ff">
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</p>
<p style="height: 200px">
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</p>
<p style="height: 200px;background: #15c6ff">
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</p>
<p style="height: 200px">
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</p>
<p style="height: 200px;background: #15c6ff">
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</p>
</div>
<div class="btn">我是底部按钮</div>
</body>
</html>
网友评论