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

最新推荐文章于 2024-12-04 16:13:44 发布

转载最新推荐文章于 2024-12-04 16:13:44 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lcx90/p/4873602.html

文章标签：

#javascript #ViewUI

本文介绍了使用CSS的负外补丁和正内补丁技术来实现等高布局的方法，并通过JavaScript脚本来动态调整元素的高度，确保左右两侧内容高度一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html:
<div id="container">
    <div id="leftSide">
        <p>aaaa</p>
        <p>aaaa</p>
    </div> 
    <div id="rightSide">
    
    </div>
</div>
1、负外补丁和正内补丁{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;
}
2、利用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';  
}