1.上下高度固定 中间内容区域自适应
实现方式，上下固定高度，底部绝对定位，中间区域绝对定位，设置top,bottom值为上下部分高度。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body,div{ padding:0; margin:0; } .top{ background:red; height:100px; } .bottom{ position: absolute; 100%; height:100px; bottom:0; background: green; } .main{ background:#f90; 100%; position: absolute; top:100px; bottom:100px; } </style> </head> <body> <div class="top"></div> <div class="main"></div> <div class="bottom"></div> </body> </html>
效果图：
（颜色辣眼睛。。。。）
2.左边宽度固定，右边宽度根据屏幕宽度自适应
实现方式，如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body,div{ padding:0; margin:0; } .left{ background:red; position: absolute; height: 300px; 300px; } .right{ margin-left:300px; height:300px; background: #ccc; } </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html>
效果图：
当然，如果右边还有固定的部分，只需要给中间部分 加上 margin-right：value；就可以实现自适应了；
另外实现这种布局还有一种很好的方法，一般用在移动端，就是flex布局
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
css
.container{ display: flex; } .left{ flex:0 0 200px; background: #ccc; } .right{ flex: 1; background: #00a0dc; }
