flex 嵌套 之 高度自适应

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>flex 嵌套 之 高度自适应</title>
    <style media="screen">
        * {
            margin: 0;
            padding: 0
        }

        .flex {
            display: -webkit-flex;
            display: flex;
            width: 100%;
            flex-direction: column;

        }

        .flex-main {
            display: -webkit-flex;
            display: flex;
            /*height: 300px; 在window.onload中设置*/
            width: 100%;
            align-items: stretch;
        }

        .item {
            flex: 1;
            background: red;
        }

        .overflow {
            overflow: auto;
        }

        .contener {
            background: pink;
            border: 0px solid silver;
        }

        .contener > div {
            padding: 0px;
        }

        #resize {
            width: 5px;
            height: 100%;
            cursor: w-resize;
            float: left;
        }
    </style>
</head>

<body>

<div id="allbody" class="flex contener overflow">                  <!-- overflow: auto 高度自适应必须 -->
    <div style="background-color: #3a8ee6;height: 54px;">
        <h3>内容器 - 头部信息</h3>
    </div>
    <div id="box" class="flex-main">
        <div id=left style="width:200px;background:yellow">
            左
        </div>
        <div id="resize"></div>
        <div id="right" class="item overflow">
            <!-- overflow: auto 高度自适应必须 -->
            内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>
            内容溢出滚动部分 <br>内容溢出滚动部分
            <div style="width:200px;height:200px;background:yellow">
                里面月33333
            </div>
            <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>
            内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>内容溢出滚动部分 <br>
            <div style="width:200px;height:200px; background: #ccc;">
                里面1
            </div>
            <div style="width:200px; height:200px;background:yellow">
                里面2
            </div>
        </div>
    </div>

    <div style="background-color: #6f7180;">
        <h5>内容器 - 尾部信息</h5>
    </div>

</div>

<script>
    window.onresize = function () {
        var hi = getViewPortHeight();
        console.log(hi)
        document.getElementById("allbody").style.height = hi + "px";
    }
    window.onload = function () {
        var hi = getViewPortHeight();
        console.log(hi)
        document.getElementById("allbody").style.height = hi + "px";
        document.getElementById("box").style.height = hi + "px";
        var resize = document.getElementById("resize");
        var left = document.getElementById("left");
        var right = document.getElementById("right");
        var box = document.getElementById("box");
        resize.onmousedown = function (e) {
            var startX = e.clientX;
            resize.left = resize.offsetLeft;
            document.onmousemove = function (e) {
                var endX = e.clientX;

                var moveLen = resize.left + (endX - startX);
                var maxT = box.clientWidth - resize.offsetWidth;
                if (moveLen < 150) moveLen = 150;
                if (moveLen > maxT - 150) moveLen = maxT - 150;

                resize.style.left = moveLen;
                left.style.width = moveLen + "px";
                right.style.width = (box.clientWidth - moveLen - 5) + "px";
            }
            document.onmouseup = function (evt) {
                document.onmousemove = null;
                document.onmouseup = null;
                resize.releaseCapture && resize.releaseCapture();
            }
            resize.setCapture && resize.setCapture();
            return false;
        }
    }


    // 获取浏览器窗口的可视区域的高度
    function getViewPortHeight() {
        return document.documentElement.clientHeight || document.body.clientHeight;
    }

</script>
</body>

</html>

 

posted @ 2019-01-22 18:13  yasepix  阅读(783)  评论(0)  编辑  收藏  举报