`
lijingzhi
  • 浏览: 41899 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

页面布局范例-固定header、footer

    博客分类:
  • css
 
阅读更多
<style type="text/css">
/*<![CDATA[*/
* {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
	text-align: center;
	font: 12px/1.4 Verdana, sans-serif;
}
#wrapper {
	width: 100%;
	min-height: 100%;
	background: #ccc;
	margin: auto;
	text-align: left;
}
* html #wrapper {
	height: 100%;
}
#header {
	background: Green;
	height: 40px;
}
#out-content {
	padding-bottom: 50px;
}
#out-content:after {
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}
* html #out-content {
	height: 1%;
}
#sidebar {
	float: left;
	background: Gray;
	margin-right: -200px;
	width:200px;
}
#content-box {
	float: right;
	width: 100%;
	background: Olive;
}
#content {
	margin-left: 200px;
}
#footer {
	height: 50px;
	background: Background;
	margin: -50px auto 0;
}
/*]]>*/
</style>


<body>
	<div id="wrapper">
		<div id="header">
			<h3>header</h3>
		</div>
		
		<div id="out-content">
			<div id="content-box">
				<div id="content">
					<h3>content</h3>
				</div>
			</div>
			<div id="sidebar">
				<h3>sidebar</h3>
			</div>
		</div>
	</div>

	<div id="footer">
		<h3>footer</h3>
	</div>
</body>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics