01
2020
07

两个DIV高度自适应方法(左右两个DIV高度一样)

 html:

<div id="container">
    <div id="leftSide">
        <p>aaaa</p>
        <p>aaaa</p>
    </div> 
    <div id="rightSide">bbb</div>
</div>

1、使用display:table; 利用的table本身的自适应特性,兼容性好,容易使用

#container{width:500px; display: table;}
#leftSide,#rightSide{display: table-cell;}
#leftSide{width:80%; background:blue; }
#rightSide{width:20%; background:green;}

2、负外补丁和正内补丁{margin-bottom:-(num)px;padding-bottom:(num)px;}相结合

#container{
   width:500px; margin:10px auto; overflow:hidden; font-size:14px;
}
#leftSide,#rightSide{
   padding-bottom:9999px; margin-bottom:-9995px; color:#fff;
}
#leftSide{
   width:195px; float:left; background:blue; line-height:20px; padding-left:5px;
}
#rightSide{
   width:300px; float:left; background:green; line-height:20px;
}

3、利用javascript脚本实现动态设置高度

var left = document.getElementById('leftSide');  

var right = document.getElementById('rightSide');  

if(left.offsetHeight>=right.offsetHeight){  

    right.style.height=left.offsetHeight+'px';  

}else{  

    left.style.height=right.offsetHeight+'px';  

}

 

« 上一篇下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。