爱恩特网络科技为无锡企业提供网站建设,网站制作,网页设计,网站改版服务,开展建站业务十年,做靠谱的网站建设团队!我们擅长营销型网站制作,高端**网站设计,为初创企业提供快速建站服务

无锡爱恩特信息科技有限公司

服务热线：

13585076606

首 页
网站建设
营销网站建设 **官网建设 标准定制官网 快速建站 电商行业门户
网站报价
移动应用
手机站/微网站 小程序
建站资讯
新闻资讯 常见问题 SEO专区
网站案例
关于我们
公司介绍 企业文化 新闻资讯 联系我们
13585076606
2021-06-22

两个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';  
 
}


声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。