一个高宽自适用100%,又有部分高宽固定的例子

最新推荐文章于 2024-08-19 08:59:19 发布

leo133845920

最新推荐文章于 2024-08-19 08:59:19 发布

阅读量115

点赞数

分类专栏： css 文章标签： IE HTML 浏览器 XHTML Go

本文链接：https://blog.csdn.net/leo133845920/article/details/83915522

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!-- hi IE,please go to Quirks Mode-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>X-Links 一个高宽自适用100%,又有部分高宽固定的例子</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="KEYWords" content="layout,auto,100,css" />
<meta name="DEscription" content="本来是以前一个朋友要做收藏夹让我抄的,live的方式不错...只在一屏显示全部内容,部分内容要固定高
宽,所以用了比较垃圾的方式...比如把IE骗进乱七八糟木模式(Quirks Mode)。" />
<meta name="author" content="aoao" />
<meta content="all" name="robots" />
<style>
.inner,
#innerFooter{
	border-color:#B7D8ED;
}
#xbar{
	/**background-color: #D2EAF6*/
}
#sortList li a{
	color:#0958FF
}
#sortList li a:hover{
	color:#670FF9;
	background-color: #efefef;
}
*{	padding:0; margin:0; }
html {height:100%; max-height:100%; background:#fff; font-size:12px; }
body {height:100%; line-height: 1.6em; max-height:100%;overflow: hidden;}
h3{	font-size: 14px;}
img{
	border-style:none;
}
#header {position:absolute;top:0; left:0; display:block; width:100%; height:80px;  z-index: 21;}
#footer {position:absolute;bottom:0; left:0; display:block; width:100%; height:60px; z-index: 21;}
#innerHeader{	margin:12px 15px; height: 48px; background-color: #efefef;}
#innerFooter{	margin:12px 15px;padding:8px;border-width:1px;border-style: solid;}
#sortList,
#selector {position:absolute;left:15px;width:180px;}
#tools,#status,#gird,
#pages {position:absolute;left: 200px;	right: 15px;}
#xbar{position: absolute; top:70px; bottom: 60px; left: 195px;width:5px; cursor: e-resize;}
#sortList{top:70px;height:46px;z-index: 19;}
#sortList li{}
#selector{top:126px; bottom:68px;  z-index: 16;}
#tools{top:70px;	z-index: 15;}
#status{top:110px;	z-index: 14;}
#gird{top:150px;	bottom: 102px;	z-index: 9;}
#pages{bottom: 60px;z-index: 12;}
#selector .inner{	height: 100%;}
#status .inner,
#tools .inner,
#pages .inner{line-height:24px;	height:24px;}
#gird .inner{height: 100%;overflow: auto;}
.inner{border-width:1px;border-style: solid;padding:3px;background-color:#fff;overflow:auto;}
#sortList .inner{	padding: 0px;}
* html #sortList .inner{height:48px}
#sortList li{
	float: left;
	width: 100%;
}
#sortList li a{
	line-height: 20px;
	display: block;
	padding:3px 0 0px 25px;
	text-decoration: none;
	font-weight: bold;
	font-size: 14px;
}
.folder a{ background: url(../images/folder.gif) no-repeat 5px 3px;  }
.tags a{ background: url(../images/tags.gif) no-repeat 5px 3px;  }
#pages{
	text-align: right;
}
* html #selector{height:100%; top:0; bottom:0; border-top:126px solid #fff; border-bottom:60px solid #fff;}
* html #gird{height:100%; top:0; bottom:0; border-top:150px solid #fff; border-bottom:96px solid #fff;}
* html #xbar{height:100%; top:0; bottom:0; border-top:70px solid #fff; border-bottom:60px solid #fff;}
* html #tools .inner,
* html #status .inner,
* html #pages .inner{height:34px}
</style>
</head>
<body>
<div id="header">
		<div id="innerHeader">一个高宽自适用100%,又有部分高宽固定的例子</div>
	</div>
		<div id="sortList">
			<div class="inner">
				<ul>
					<li class="folder"><a href="#">显示文件夹</a></li>
					<li class="tags"><a href="#">显示标签</a></li>
				</ul>
			</div>
		</div>
		<div id="selector">
			<div class="inner">
			<h3>您的标签</h3>
			test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br 
/>test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br 
/>test<br />test<br />test<br />test<br />test<br />test
			</div>
	</div>

	<div id="xbar"></div>
	<div id="tools">
		<div class="inner">dfsdf</div>
	</div>
	<div id="status">
		<div class="inner">status</div>
	</div>
	<div id="gird">
		<div class="inner"><p>本来是以前一个朋友要做收藏夹让我抄的,live的方式不错...只在一屏显示全部内容,部分内容要固
定高宽,所以用了比较垃圾的方式...比如把IE骗进乱七八糟木模式(Quirks Mode)。</p>
<p>所有主布局的元素都是用position:absolute流出来body后..根据不同浏览器写不同的定位方式</p>
<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br 
/>test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br 
/>test<br />test<br />test<br />test</p>
			</div>
	</div>
	<div id="pages">
	<div class="inner">
	<a href="#"><img src="http://lab.loaoao.com/demo/layout/100x100/images/f.gif" /></a>
	<a href="#"><img src="http://lab.loaoao.com/demo/layout/100x100/images/p.gif" /></a>
	<span>1/1 页</span>
	<a href="#"><img src="http://lab.loaoao.com/demo/layout/100x100/images/n.gif" /></a>
	<a href="#"><img src="http://lab.loaoao.com/demo/layout/100x100/images/e.gif" /></a>
	</div>
	</div>
<div id="footer">
	<div id="innerFooter">copyright 2006 loaoao.com</div>
</div>
</body>
</html>