效果:
左边固定宽度, 右边宽度自适应
右边容器中上边固定高度, 下边高度自适应
实现方法及原理:
1 左边高度100%, 固定宽度, 设置为左浮动布局
2 右边设置overflow为hidden, 开启BFC, 消除浮动对布局的影响, 利用宽度自动扩张, 是其宽度自适应
3 右边容器中, 固定上层容器的高度
4 将下层的元素设置为怪异盒模型, 并设置padding-bottom为上层容器的高度
代码实现如下:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css">
7 .wrapper{
8 height: 500px;
9 width: 500px;
10 position: relative;
11 background: pink;
12 }
13 .left{
14 height: 500px;
15 width: 150px;
16 float: left;
17 background: yellowgreen;
18 }
19 .right{
20 height: 100%;
21 overflow: hidden;
22 background: yellow;
23 }
24 .top{
25 height: 150px;
26 background: pink;
27 }
28 .bottom{
29 height: 100%;
30 padding-bottom: 150px;
31 box-sizing: border-box;
32 background: blue;
33 }
34
35 </style>
36 </head>
37 <body>
38 <div class="wrapper">
39 <div class="left"></div>
40 <div class="right">
41 <div class="top"></div>
42 <div class="bottom"></div>
43 </div>
44 </div>
45 </body>
46 </html>