概述: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