左右div高度相同

最新推荐文章于 2024-08-05 00:42:25 发布

21989939

最新推荐文章于 2024-08-05 00:42:25 发布

阅读量1.3k

点赞数

分类专栏：【前端】基础文章标签： javacript

本文链接：https://blog.csdn.net/qq_21989939/article/details/46596987

版权

【前端】基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.head引入

<script type="text/javascript" src="./resources/js/jquery.js"></script>
 <script type="text/javascript">
    $(document).ready(function() {
        window.onload=function(){
            autoHeight();
        }
    })
    function autoHeight(){
        if($("#left").offsetHeight>=$("#right").offsetHeight){
            $("#right").css({'height':'$("#left").offsetHeight+"px"'})
        }else{
            $("#left").css({'height':'$("#right").offsetHeight+"px"'})
        }
    }
    </script>

2.html

<div style="width:800px;" style="display:inline">
    <div id="left" style='float:left;width:330px; height:200px;background-color:red'>
            <p>左侧页面</p>
            <p>右侧页面</p>
            <p>右侧页面</p>
            <p>右侧页面</p>
            <p>右侧页面</p>
            <p>右侧页面</p>
    </div>
    <div id="right" style='float:left;width:330px; height:200px;background-color:blue'>
            <p>右侧页面</p>
    </div>
</div>