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里左右栏的宽和颜色相对应。

然后把这个图片添加到父盒子的背景：即给父盒子.main添加一条属性： 
background: url(bg.jpg) repeat-y; 
这样图片就把高度撑开了：

一些著名的网站如搜狐，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;     }