zoukankan      html  css  js  c++  java
  • 一个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;auto;background: cornflowerblue;margin: 10px;">左侧内容块 -高度
                    <label id="lh"></label>
                </div>
            </div>
            <div class="rightdiv autoheight">
                <div style="height: 50px; 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>
  • 相关阅读:
    实用脚本 2 Linux下定时执行脚本
    SSH原理与运用(一):远程登录
    SSH原理与运用(二):远程操作与端口转发
    注册页面
    注册页面2
    CSS實現網頁漸變背景
    SQL Server Log文件“減肥”方法
    发布一个jquery插件在Web下输入密码时提示大写锁定键
    新增流水号
    ftp图片上传
  • 原文地址:https://www.cnblogs.com/Feng-Scorpio/p/7144500.html
Copyright © 2011-2022 走看看