高度自适应100%显示,顶部和底部固定,中间自适应。左侧固定,右侧自适应的实例。
2012-12-07 13:58
459 查看
<!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>
相关文章推荐
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
- CSS实现自适应高度布局:头部底部固定,中间自适应铺满屏幕剩余高度,中间盒子里左盒子固定右盒子自适应宽度
- 顶部和底部固定中间自适应的布局
- 左侧固定,右侧自适应,两列等高并且自适应的第二种办法
- HTML/CSS学习之 三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化
- FrontEnd 步步高升:header和footer始终显示在浏览器顶部和底部,中间区域自适应
- 前端之-三列布局。顶部-底部-中间两侧固定。中间内容自适应
- 前端面试之两栏布局,左侧固定右侧自适应;三栏布局,左右定宽,中间自适应
- CSS Div固定在网页顶部、底部、左侧、右侧
- NO.24 关于左侧div固定宽度,右侧自适应时footer不能在最底部的问题
- 用两种不同的方式来实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
- 中间固定,两边自适应的三列布局、两边固定,中间自适应的三列布局、左侧栏固定,右侧自适应的两列布局
- 站长素材 代码预览页面 内容高度自适应 高度100% 实现页脚 底部显示
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
- 页面左侧宽度固定,右侧自适应或者右侧固定宽度,左侧自适应
- 用两种不同的方式来实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化
- CSS float的初步理解:用两种不同的方式来实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化
- 左右侧固定,中间自适应布局和 左侧固定,右侧自适应布局