1、上层标签块;
2、左侧菜单块;
3、中部内容显示块;
需求:要求上层标签块、左侧菜单快固定不动,滚动条只对中部显示块作用;
1 <div class="all" style="background: aquamarine;"> 2 <div class="header" style="background: crimson"> 3 头部 4 5 </div> 6 <div class="con"> 7 <div class="asilde" style="background: black"> 8 左侧导航 9 </div> 10 <div class="main"> 11 主内容 12 </div> 13 </div> 14 </div> 15 <style> 16 .all{ 17 position: absolute; 18 top: 0px; 19 bottom: 0px; 20 width: 100%; 21 height: 100%; 22 } 23 .header{ 24 height: 50px; 25 line-height: 50px; 26 } 27 .con .asilde{ 28 position:absolute; 29 top:50px; 30 left:0; 31 bottom:0; 32 width:200px; 33 background-color:red; 34 } 35 .con .main{ 36 position:absolute; 37 top:50px; 38 left:200px; 39 right:0; 40 background-color:green; 41 bottom:0; 42 /* “bottom:0 与 overflow” 结合使用的效果:当内容超出显示器时,自动添加本区域的滚动条,其他区域保持不变*/ 43 overflow:auto; 44 /*除了上面的方式,还有一种是不定义bottom,也不用overflow,这样内容是多少,中间内容区的行高就是多少,自适应,但是菜单和标题栏就会随着滚轮而动*/ 45 } 46 /*.con{position: relative; width:100%; height:100%;}*/ 47 /*.asilde,.main{position: absolute;top:0px; bottom:0;height:100%;}*/ 48 /*.asilde{width:222px;left:0;background:#eee;}*/ 49 /*.main{left:0;right:0;margin-left:222px; background:#999;width:100%;}*/ 50 </style>
效果图: