代码改变世界

等高DIV

2012-02-17 17:27  边缘er  阅读(225)  评论(0编辑  收藏  举报

1、利用边距(margin)和补白(padding)实现div等高

<style type="text/css">
body,div,p
{margin:0;padding:0;}
#wrap
{overflow:hidden;width:1000px;margin:0 auto;}
#left,#center,#right
{margin-bottom:-10000px;padding-bottom:10000px;}
#left
{float:left;width:250px;background:#00FFFF;}
#center
{float:left;width:500px;background:#FF0000;}
#right
{float:right;width:250px;background:#00FF00;}
</style>
<div id="wrap">
<div id="left">
<p>left</p>
<p>left</p>
</div>
<div id="center">
<p>center</p>
</div>
<div id="right">
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>

2、js方法实现等高、

<style type="text/css">
body,div,p
{margin:0;padding:0;}
#wrap
{overflow:hidden;width:1000px;margin:0 auto;}
#left
{float:left;width:500px;background:#00FFFF;}
#right
{float:right;width:500px;background:#00FF00;}
</style>
<div id="wrap">
<div id="left">
<p>left</p>
<p>left</p>
</div>
<div id="right">
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
<script type="text/javascript">
document.getElementById(
'left').style.height = document.getElementById('right').offsetHeight + 'px';
</script>

3、背景图欺骗-看似等高

如果左右2部分都有可平铺的背图,可以切一条铺早父元素上,父元素高度是随子元素延展的,看上去也等高了,如下图