master

分支 (2)

管理

管理

master

dev_test

web-test
/
CSS实现DIV高度height全屏布局.html

<!DOCTYPE html>
<html lang="en-US">
	<head>
		<meta charset="UTF-8">
		<title>三列布局</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {
				height: 100%;
			}

			html {
				height: 100%;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				padding: 80px 0 35px 0;
				overflow: hidden;
			}

			#header {
				position: relative;
				height: 80px;
				margin-top: -80px;
				background: #f1f1f1;
				border: 1px solid #ddd;
				border-width: 1px 0 1px 0;
			}

			#aside {
				position: relative;
				float: left;
				width: 198px;
				height: 100%;
				overflow: auto;
				background: #fff;
			}

			#main-content {
				position: relative;
				height: 100%;
				overflow: auto;
			}

			#footer {
				position: relative;
				height: 30px;
				clear: both;
				background: #f1f1f1;
				border: 1px solid #ddd;
			}
		</style>
	</head>
	<body>
		<!-- <ul id="topbar">
    <li>123</li>
    <li class="pull-right">123</li>
</ul> -->
		<div id="header">
			header
		</div>
		<div id="aside">
			left
		</div>
		<div id="main-content">
			ddd
		</div>
		<div id="footer">
			footer
		</div>


	</body>
</html>