实用的两列等高布局

做后台模板的时候会遇到左侧随着右侧高度增加而增加的两列等高布局，查阅资料和总结了一下有以下几种方法：

HTML代码

 <div id="header">头部</div>
        <div id ="container">
            <div class="mainbox">
                主内容区域
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
                1<br/>
            </div>
            <div class="sidebox">侧边栏</div>
        </div>
        <div id="footer">页脚</div>

一：负边距的实现

*{
    margin:0;
    padding:0;
}
#header,#footer{
    width:960px;
    height:30px;
    background-color:#E8E8E8;
}
#container{
    width:960px;
    overflow:hidden;/重点！将父级元素多余部分切除掉/
    margin:10px 0;
}
.mainbox{
    float:left;
    width:650px;
    background-color:#333333;
}
.sidebox{
    float:right;
    width:280px;
    background-color:#AAAAAA;
}
.mainbox,.sidebox{
    padding:0 5px;
    color:#FF0000;
    margin-bottom:-9999px;/*将容器背景色拉伸*/
    padding-bottom:9999px;/*将容器背景色拉伸*/
}
#container:after{
    display:block;
    visibility:hidden;
    font-size:0;
    line-height:0;
    clear:both;
    content:"";
}

二：背景模拟

*{
    margin:0;
    padding:0;
}
#header,#footer{
    width:960px;/*设置头部，页脚宽度*/
    height:30px;/*设置头部，页脚高度*/
    background-color:#6CF;/*设置头部，页脚背景颜色*/
}
#container{
    width:960px;/*设置元素宽度*/
    background:url(images/bg.png) repeat-y 0 0; /*将背景图片以y轴重复*/
}
.mainbox{
    float:left;/*元素左浮动*/
    width:650px;/*元素宽度*/
}
.sidebox{
    float:right;/*元素右浮动*/
    width:280px;/*元素宽度*/
}
.mainbox,.sidebox{
     padding:0 5px;
     color:#FF0000;
}/*设置mainbox,sidebox共同属性*/
#container:after{
     display:block;
     visibility:hidden;
     font-size:0;
     line-height:0;
     clear:both;
     content:"";
}/*清楚浮动*/

三：使用border实现等高

*{
  margin:0;
  padding:0;
}
#header,#footer{
  width:970px;
  height:30px;
  background-color:#9CF;
}
#container{
  position:relative;/*将子元素的定位到具体的参照对象*/
  width:970px;
  margin:10px 0;
}
.mainbox{
  width:650px;
  background-color:#FC9;
  border-right:320px solid #F63;/*设置左边框宽度为320px像素，同等于sidebox的宽度*/
}
.sidebox{
  width:320px;
  position:absolute;
  top:0;
  right:0;/*使元素靠右*/
}

另外还有几种CSS3和JS实现的参考以下教程

http://www.csssea.com/?p=230

http://www.w3cplus.com/css/creaet-equal-height-columns