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

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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;
}
#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(//ku.shouce.ren/files/images/201601/56a3112e2839c.gif) no-repeat 5px 3px;  }
.tags a{ background: url(//ku.shouce.ren/files/images/201601/56a3112ebc809.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="/">手册网首页</a> 
<a href="#">源码下载</a> 
<a href="#">论坛精选</a> 
<a href="#">网页特效</a> 
<a href="#">设计图片</a> 
<a href="#">书籍教程</a> 
<a href="#">设计素材</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="//ku.shouce.ren/files/images/201601/56a3112f5c922.gif" /></a> 
        <a href="#"><img src="//ku.shouce.ren/files/images/201601/56a3112fe9d97.gif" /></a> 
        <span>1/1 页</span> 
        <a href="#"><img src="//ku.shouce.ren/files/images/201601/56a3113084279.gif" /></a> 
        <a href="#"><img src="//ku.shouce.ren/files/images/201601/56a3113119d67.gif" /></a> 
        </div> 
        </div> 
<div id="footer"> 
        <div id="innerFooter"><p id="copyright">Copyright ? <a rel="license" href="/" title="">知识共享组织</a></p> 
        </div> 
</div> 
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

表格图层

描述

这是一个高度自适应100%显示，顶部和底部固定，中间自适应。左侧固定，右侧自适应的实例，本来是以前一个朋友要做收藏夹让我抄的,live的方式不错...只在一屏显示全部内容,部分内容要固定高宽,所以用了比较垃圾的方式...比如把IE骗进乱七...