高度自适应100%显示,顶部和底部固定,中间自适应。左侧固定,右侧自适应的实例。
<!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<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 © <a rel="me" href="http://www.aoao.org.cn/" title="Beautiful Style « 样式之美 » www.aoao.org.cn">aoao</a> . <a rel="license" href="http://creativecommons.org/licenses/by/2.5/" title="知识共享组织">Some rights reserved</a>.</p> </div> </div> </body> </html>