📝 代码查看
使用runcode.html页面

2
查看次数
2025-12-01
创建时间
2025-12-01
最后更新
<!--[if IE ]>
<style type="text/css">

* html {padding:5em 0 5em;overflow:hidden} 
* html body{padding:5em 0 5em;padd\ing:0;}
html,body{overflow:hidden;	background:#d2da9c;}
* html #outer{	
	height:100%;
	position:relative;
	margin-left:150px;
	left:0;top:0;
	right:0;bottom:0;
}
* html .stretch{
	width:100%;
	background:red;
}
* html #left{
	height:100%;
 float:left;
	top:0;
	bottom:0;
	position:relative;
	overflow:auto;
}
* html #bottom{	bottom:-1px;}
* html .inner{
	position:absolute;
	height:100%;
}
</style>
<![endif]-->
<div id="top">
	<div class="stretch">
		<h1>Fixed header, footer and sidebar</h1>
	</div>
</div>
<div id="left">
	<p>test start </p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test</p>
	<p>test last</p>
</div>
<div id="outer">
	<div class="inner">
		<h2>Experimental layout use at your own risk.</h2>
		<p>Quickly tested in Ie6, IE7, Opera 9 and firefox 2.0</p>
		<p>the header and footer need to be a fixed height but you could add overflow:auto instead of hidden to force scrollbars for larger content.</p>
		<p><img src="/d/file/computer/programme/html_div_css/2025-12-01/f1ba4cfce650b632fa4ad16194e2ba24.jpg" alt="test" width="500" /></p>
		<p>A horizontal scrollbar will appear on the bottom of this section if you have a large image as above.</p>
		<p>start</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test last</p>
	</div>
</div>
<div id="bottom">
	<div class="stretch">
		<h2>Fixed header, footer and sidebar</h2>
	</div>
</div>
* {margin:0;padding:0}
p{margin:0 0 1em 0}
html,body{margin:0;padding:0}
body{height:100%;margin:0; }
#outer{
	background:#ffffcc;
	overflow:auto;
	position:absolute;
	left:150px;
	right:0;
	top:5em;
	bottom:5em;
}
#top{
	position:absolute;
	left:0px;
	right:0;
	top:0;
	height:5em;
	background:red;
	overflow:hidden;
}
#bottom{
	position:absolute;
	left:0px;
	right:0;
	bottom:0;
	height:5em;
	background:red;
	overflow:hidden;
}
#left{
	position:absolute;
	overflow:auto;
	background:#d2da9c;
	top:5em;
	bottom:5em;
	left:0;
	width:150px;
}
暂无JavaScript代码

👁️ 实时预览