左右两个div高度自适应

最新推荐文章于 2021-06-15 12:38:06 发布

vuvivian

最新推荐文章于 2021-06-15 12:38:06 发布

阅读量664

点赞数

分类专栏：初级杂文文章标签：布局

本文链接：https://blog.csdn.net/vuvivian/article/details/75003603

版权

初级杂文专栏收录该内容

11 篇文章 0 订阅

订阅专栏

布局

                                                                                                                                                               <div  style="width: 1200px; margin: 0 auto; ">

 <div id="main_m1" style="width: 249px; float: left; border-bottom: none;" >左：看山不是山 看水不是水 看花不是花。</div>
 <div id="main_m2"  style="width:920px;float:left;border-style: none; border-right: solid 1px #DFF0D8;">
    右：从此，看山是山，看水是水，看花是花。
    右：从此，看山是山，看水是水，看花是花。
    右：从此，看山是山，看水是水，看花是花。</div>
 </div>

JS代码

 $(function(){
    var heightLeft= $("#main_m1").height();
    console.info(heightLeft);
    var heightRight= $("#main_m2").height();
    console.info(heightRight);
    var heightMax = Math.max(heightLeft, heightRight);
    console.info(heightMax);    
    if(heightLeft<heightRight){
        $("#main_m1").height(heightRight);
    }else{
        $("#main_m2").height(heightLeft);
    }
  });