css兩欄布局之左側固定右側高度自適應

先看這樣的html+css結構：

  .main {
        width: 900px;
        overflow:hidden;
        margin: 0 auto;
        border:1px solid #000;
    }
     .left {
        width: 600px;
        float:left;
        background: #ccb;
     }
     .right {
        float:left;
        width: 300px;
        background: #acf;
     }
 

  <div class="main">
        <div class="left">
            <p>我是內容</p>
            <p>我是內容</p>
            <p>我是內容</p>
            <p>我是內容</p>
            <p>我是內容</p>
            <p>我是內容</p>
        </div>
        <div class
 
="right"></div>
    </div>

條件：左欄右欄均寬度固定，現在左側高度由內容自動撐開，問怎樣實現右側高度隨左側自適應變化。

由以上的代碼可以得到下圖

• 1 背景圖片法：
  先用ps做一個背景圖，註意背景圖的寬及顏色要和html+css裏左右欄的寬和顏色相對應。

一些著名的網站如搜狐，12306等就采用了這種方法。。

• 2 margin和padding補償法：

  給右側欄代碼css樣式裏添加一個足夠大的padding-bottom值，再添加相等的負的margin-bottom值，這樣右側高度就撐開了，右側欄代碼如下：

     .right {
      float:left;
      width: 300px;
      background: #acf;
      padding-bottom:100000em;
      margin-bottom:-100000em;
   }
  

  這種方法還是相當簡單方便的，只是打開控制臺可以看到右側欄盒模型有一個很大的padding值，強迫癥者慎用。
  
  

• 3 絕對定位法：

  父盒子設置相對定位，右側欄設為絕對定位且right:0，去掉浮動屬性，這樣右盒子脫離標準文檔流就可以加屬性height:100%，它的高度就和和父盒子同步了。
  右側欄代碼變為：

    .right {
        position:absolute;
        height:100%;
        right:0;
        width: 300px;
        background: #acf;
     }

css之兩欄布局左側固定右側高度自適應