一个DIV中, 多个子DIV高度统一自适应 

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <style type="text/css">
    body {
        background-color: snow;
    }
    
    .viewdiv {
        overflow: hidden;
        margin-left: 210px
    }
    
    .leftdiv {
        display: inline-block;
        float: left;
        width: 200px;
        /*height: 100%;*/
        background-color: orange;
    }
    
    .rightdiv {
        overflow: hidden;
        margin-left: 210px;
        background-color: aquamarine;
    }
    
    .fatherdiv {
        min-width: 1200px;
        margin-left: 8px;
        overflow: hidden;
        background-color: lightgray;
    }
    
    .autoheight {
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
    </style>
</head>

<body>
    <div style="margin-bottom:20px;margin-left: 10px;">
        <p style=" background: cornflowerblue;">
            <label>左侧 高</label>
            <input type="text" id="ls">
        </p>
        <p style="background-color:green;">
            <label>有侧 高</label>
            <input type="text" id="rs">
        </p>
    </div>
    <div id="customView" class="fatherdiv">
        <div class="leftdiv autoheight">
            <div style="height: 150px;width:auto;background: cornflowerblue;margin: 10px;">左侧内容块 -高度
                <label id="lh"></label>
            </div>
        </div>
        <div class="rightdiv autoheight">
            <div style="height: 50px;width: auto;background-color:green;margin: 10px;">右侧内容块 -高度
                <label id="rh"></label>
            </div>
            <div style="clear:both;height:0;font-size: 1px;line-height: 0px;">
            </div>
        </div>
    </div>
    <script type="text/javascript">
    $(function() {
        $("#lh").text(150);
        $("#rh").text(50);
    });

    $("#ls").change(function() {
        $("#lh").text($("#ls").val()).parent().css("height", $("#ls").val() + "px");
    });
    $("#rs").change(function() {
        $("#rh").text($("#rs").val()).parent().css("height", $("#rs").val() + "px");
    });
    </script>
</body>

</html>

 

posted @ 2017-07-10 10:12  天蝎座  阅读(570)  评论(0)  编辑  收藏  举报