1. 程式人生 > >把div固定於頁面腳部(程式碼)

把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>