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

最新推荐文章于 2024-07-09 14:49:23 发布

原创最新推荐文章于 2024-07-09 14:49:23 发布

· 625 阅读

0 ·

版权

文章标签：

#c#

css 专栏收录该内容

1 篇文章

订阅专栏

本文详细解析了一个具体的网页布局案例，通过使用HTML和CSS技术实现特定的页面结构，包括header、content、sidebar及footer等部分，并对各部分的样式设置进行了说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


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