sticky footer

sticky footer:

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title>	sticky footer</title>
	<style type="text/css" rel="stylesheet">
		*{
			padding:0;
			margin:0;
		}
		html,body{
			height:100%;
		}
		.wrap{
			min-height:100%;
		}
		.main{
			padding:15px 15px 70px 15px;
			
		}
		.footer{
			margin:-70px;
			height:70px;
			background:grey;
			text-align:center;
			line-height:70px;
		}
	</style>
</head>
<body>
    <div class="wrap">
         <div class="main">
            我是主体内容
         </div>
    </div>
    <div class="footer">	
         我是footer
    </div>
</body>
</html>

　清除浮动

.clearfix{
      display:inline-block
}
.clearfix:after{
    display:block
    content:"."
    height:0
    line-heihgt:0
    clear:both
    visibility:hidden
 
}

　　

posted @ 2017-09-20 11:25  karila  阅读(120)  评论(0)    收藏  举报