利用css实现两列等高的方法

1:利用负边距

<style type="text/css">

.container{

width:980px

background: pink;

overflow:hidden;

}

/*清楚浮动*/

.clearfloat{

zoom:1;

}

.clearfloat:after{

display:block;

clear:both;

content:"";

height: 0;

line-height: 0;

visibility: hidden;

}

/*清楚浮动*/

.mainbox{

width:650px;

float:left;

background: red;

margin-bottom:-9999px;

padding-bottom:9999px;

}

.sidebox{

width:280px;

float: right;

background: green;

margin-bottom:-9999px;

padding-bottom:9999px;

}

</style>

2：利用背景图片在Y方向重复

<style type="text/css">

.container{

width:980px

background: url(images/a.png) repeat-y 0 0;

}

/*清楚浮动*/

.clearfloat{

zoom:1;

}

.clearfloat:after{

display:block;

clear:both;

content:"";

height: 0;

line-height: 0;

visibility: hidden;

}

/*清楚浮动*/

.mainbox{

width:650px;

float:left;

}

.sidebox{

width:280px;

float: right;

}

</style>

3：利用边框模拟（定位元素的高度不能大于非定位元素的高度）

<style type="text/css">

.container{

width:980px;

positin:relative;

}

/*清楚浮动*/

.clearfloat{

zoom:1;

}

.clearfloat:after{

display:block;

clear:both;

content:"";

height: 0;

line-height: 0;

visibility: hidden;

}

/*清楚浮动*/

.mainbox{

width:650px;

float:left;

background: red;

border-right:280px solid green;

}

.sidebox{

width:280px;

position:absolute;

top:0;

right:0;

}

</style>

div class="container clearfloat">

<div class="mainbox">主要</div>

<div class="sidebox">侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏</div>

</div>