css之两栏布局左侧固定右侧高度自适应

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;
     }