再次分享：高宽自适应100%,并部分高宽固定的DIV＋CSS实例

小真子 2010-10-27 12:17:23

本实例是，高度自适应100%显示，顶部和底部固定，中间自适应。左侧固定，右侧自适应的经典实例。

先看演示：DEMO

代码：

<!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>一个高宽自适用100%,又有部分高宽固定的例子</title> 

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 

<style>



*{        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;

}

.inner,

#innerFooter{

        border-color:#B7D8ED;

}

#xbar{

        /**background-color: #D2EAF6*/

}

#sortList li a{

        color:#0958FF

}

#sortList li a:hover{

        color:#670FF9;

        background-color: #efefef;

}

#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%;}

.inner p a{ display:block; float:left; margin-right:10px;}

#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(http://labs.aoao.org.cn/demo/layout/100x100/images/folder.gif) no-repeat 5px 3px;  }

.tags a{ background: url(http://labs.aoao.org.cn/demo/layout/100x100/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"><h3>本实例是，高度自适应100%显示，顶部和底部固定，中间自适应。左侧固定，右侧自适应的实例。</h3></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> 

                        <p><a href="http://www.websjy.com/html/">首页</a> 

<a href="http://www.websjy.com/html/html/news.html">设计资讯</a> 

<a href="http://www.websjy.com/html/html/bbs.html">论坛精选</a> 

<a href="http://www.websjy.com/html/html/uchblog.html">设计日志</a> 

<a href="http://www.websjy.com/html/html/uchimage.html">设计图片</a> 

<a href="http://www.websjy.com/html/m.php?name=jc">设计教程</a> 

<a href="http://www.websjy.com/html/m.php?name=sc">设计素材</a> 

<a href="http://www.websjy.com/my/">设计部落</a> 

<a href="http://www.websjy.com/bbs">设计论坛</a></p>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">这里可以当工具栏</div> 

        </div> 

        <div id="status"> 

                <div class="inner">这里可以显示状态 ^^</div> 

        </div> 

        <div id="gird"> 

                <div class="inner"><p>本来是以前一个朋友要做收藏夹让我抄的,live的方式不错...只在一屏显示全部内容,部分内容要固定高宽,所以用了比较垃圾的方式...比如把IE骗进乱七八糟木模式(Quirks Mode)。</p> 

<p>所有主布局的元素都是用position:absolute流出来body后..根据不同浏览器写不同的定位方式

<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://labs.aoao.org.cn/demo/layout/100x100/images/f.gif" /></a> 

        <a href="#"><img src="http://labs.aoao.org.cn/demo/layout/100x100/images/p.gif" /></a> 

        <span>1/1 页</span> 

        <a href="#"><img src="http://labs.aoao.org.cn/demo/layout/100x100/images/n.gif" /></a> 

        <a href="#"><img src="http://labs.aoao.org.cn/demo/layout/100x100/images/e.gif" /></a> 

        </div> 

        </div> 

 

 

<div id="footer"> 

        <div id="innerFooter"><p id="copyright">Copyright © Some rights reserved</p> 

        </div> 

</div> 

 

</body> 

</html>