您的位置：首页 > Web前端 > CSS

CSS Sticky Footer布局

2017-07-25 18:44 555 查看
效果：

1、若页面内容不够长时，页脚块粘贴在视窗底部（内容不够100%，页脚固定在页面底部）；

2、若页面内容足够长时，页脚会被内容向下推送（内容超过100%，页脚随着滚动，在页面底部）。

固定的html结构和固定的css布局。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>CSS Sticky Footer</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height:100%;
width:100%;
overflow: hidden;
}
.oDiv{
height:100%;
width:100%;
overflow: auto;
background-color: rgba(7,17,27,.8);
color:#fff;
}
.wrapper{
width:100%;
min-height:100%;
}
.content{
padding-bottom: 60px;/*留出底部空间*/
}
.footer{
position: relative;
margin-top: -60px;/*显示底部内容*/
height:60px;
clear: both;
box-sizing: border-box;
border-top: 1px solid #ccc;
text-align: center;
line-height:60px;
}
</style>
<body>
<!--最外层div-->
<div class="oDiv">
<!--第二层div-wrapper-->
<div class="wrapper">
<!--第三层div-main-->
<div class="content">
content
<!--ul若被注释,页面内容不超过100%,footer固定在页面底部-->
<!--ul若未被注释,页面内容超出100%,滚动页面,footer在页面底部-->
<!--<ul>
<li style="height:300px;width: 100%;background-color: #999;margin-bottom: 20px;text-align: center;line-height: 300px;">1</li>
<li style="height:300px;width: 100%;background-color: #999;margin-bottom: 20px;text-align: center;line-height: 300px;">2</li>
<li style="height:300px;width: 100%;background-color: #999;margin-bottom: 20px;text-align: center;line-height: 300px;">3</li>
</ul>-->
</div>
</div>
<!--第二层div-footer-->
<div class="footer">
footer
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航