把div固定于页面脚部(代码)

暂时没时间编辑,直接上代码,以后再一一解释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<title></title>
		<style type="text/css">
			html,body{
				height: 100%; 
			}
			*{
				padding: 0px;
				margin: 0px;
			}
			.header,.footer{
				font-size: 20px;
				font-weight: 800;
				width: 100%;
				height: 60px;
				line-height: 60px;
				text-align: center;
				color: white;
			}
			.header{
				background: rgba(0,0,0,0.5);
				margin-bottom: 10px;
			}
			.mian{
				min-height: 100%; 
				height: auto !important;
				padding-bottom: 60px;
				height: 100%;
				background: #CECECE;
			}
			
			.content{
				background: #FFFFFF;
				width: 90%;
				margin: 0px auto;
				box-shadow: 2px 0px 10px #000,
							0px 2px 10px #000;
				margin-top: 0px;
			}
			.footer{
				background: #FF4F01;
				position: relative;
				clear:both; 
				margin-top: -60px;
			}
		</style>
	</head>
	<body>
		<div class="mian">
			<header class="header">
				头部
			</header>
			<div class="content">
				<br /><br /><br /><br /><br /><br /><br /><br /><br />
				<br /><br /><br /><br /><br /><br /><br /><br /><br />
				<br /><br /><br /><br /><br /><br /><br /><br /><br />
				<br /><br /><br /><br /><br /><br /><br /><br /><br />
				<br /><br /><br /><br /><br /><br /><br /><br /><br />1
			</div>
			1
		</div>
		<footer class="footer">
			脚部
		</footer>
	</body>
</html>


你可能感兴趣的:(页面脚部固定)