html代码：

     
      固定宽度区
     
     
      自适应宽度区
     
     
      底部区
     

 

css代码：

/*第一种方法(浮动)*/ .left {
     float: left;  width: 100px;  height: 400px;  background-color: blue;}.right {
     margin-left: 100px;  height: 200px;  background: green;}.footer {
     clear: both;  background-color: yellow;} /*第二种方法（相对布局）*/.left {
     position: absolute;  top: 0;  left: 0;  width: 100px;  height: 150px;  background-color: blue;}.right {
     margin-left: 100px;  height: 150px;  background-color: green;}.footer {
     background-color: yellow;}/*第三种方法（flex）*/.left {
     float: left;  width: 100px;  height: 150px;  background-color: blue;}.right {
     display: flex;  flex: 1;  height: 150px;  background-color: green;}.footer {
     background-color: yellow;}