左边自适应+右边固定

 1 <div class="layout">
 2     <div class="header">蜘蛛侠</div>
 3        <div class="main">
 4            <div class="main_left">钢铁侠</div>
 5            <div class="main_right">黑猫警长</div>
 6 
 7        </div>
 8 
 9     </div>
10 
11 //css样式
12  * {
13   padding: 0;
14   margin: 0;
15 }
16 .layout {
17   width: 100%;
18   height: 100%;
19 }
20 .layout > .header {
21   width: 100%;
22   height: 50px;
23   background-color: pink;
24 }
25 .layout .main {
26   width: 100%;
27   height: 500px;
28   overflow: hidden;
29   position: relative;
30   background-color: firebrick;
31 }
32 .layout .main > .main_left {
33   margin-right: 50px;
34   background-color: red;
35   height: 100%;
36 }
37 .layout .main > .main_right {
38   width: 100px;
39   height: 100%;
40   position: absolute;
41   right: 0;
42   top: 0;
43   background-color: green;
44 }