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'; }
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。