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

Css Sticky Footer将页脚固定在页面底部

2017-05-19 10:17 736 查看

概述：Css Sticky Footer

如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

实现方法：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css Sticky Footer</title>
<style>
*{padding:0; margin:0}
html,body{height:100%;}
.wrapper{min-height:100%; height:100%; width: 100%;}
.header{width:100%; height:100px;background-color:#999; }
.main{padding-bottom:100px;}
p{ height:800px; width:100%; background-color:green;}
.footer{ position: relative;width:100%; height:100px; clear:both; margin:-100px auto 0; background-color:#666;}
.clearfix{display:inline-block;}
.clearfix:after{display:block;content:'.';height:0;line-height:0;clear:both;visibility:hidden;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="main">
<p></p>
</div>
</div>
<div class="footer"></div>
</body>
</html>总结：
1、可以通过改变p标签的高度，来查看底部的位置情况

2、main的padding-bottom值和footer的height值、margin-top负值要保持一致

3、wrapper的min-height值为100%，

4、html和body的height值为100%，wrapper继承父元素body的height

5、clearfix是清除浮动的Hack

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航