[ CSS ] - 20140612-题目1

[ CSS ] - 20140612-题目1

用html,css实现以下三种情况的布局：
1. 2列布局：左固定，右自适应。
2. 3列布局：左右固定，中自适应。
3. 2行上下布局，下是左右布局：
  a. 头部高固定且位置固定，
  b. 下左宽度固定，下右宽度自适应且实现iframe高度自适应，
  c. 全屏无横向滚动条，下左，下右内容超出高度时出现纵向滚动条 (可以不考虑ie6，用纯css实现)。

PS:
1. 回复时注意加上下面这句话，才会有语法高亮或格式缩进。
```html
// you code
```
2. 也可以粘贴jsfiddle地址，比如：
http://jsfiddle.net/jikeytang/Rmt8M/
评论支持markdown语法。
[http://jsfiddle.net/jikeytang/Rmt8M/](http://jsfiddle.net/jikeytang/Rmt8M/)

1楼的第一题有误，下面是我的方案，不过也不是很好，我只会用百分比。换成固定数字就不行。
1.

<style type="text/css"> *{margin: 0; padding: 0;} .content{width: 100%;} .div1{width: 20%; height:100%; background: blue; float: left; position:fixed} .div2{ width:80%; float:right; background: red; } .clearfix { *zoom: 1;} .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both; } </style>

    <div class="div2 clearfix">第三方士大夫</div>
</div>

1.
<style>
    .left{
      width:200px;
      height:400px;
      background:#ccc;
      float:left;
    }
    .right{
      width:100%;
      height:400px;
      background:yellow;
      margin-left:200px;
      position:absolute;
    }
 </style>
<div class="left"></div>
<div class="right"></div>

http://jsbin.com/#/harolihe/1/edit

2.
<style>
    .left{
      width:200px;
      height:400px;
      background:#ccc;
      float:left;
    }
    .center{
      height:400px;
      border:1px solid red;
      margin:0 200px;
    }
    .right{
      width:200px;
      height:400px;
      background:green;
      float:right;
    }
  </style>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>

http://jsbin.com/harolihe/7/edit

@chenfengyanyu 你的答案才应该是第一题的最佳答案