Question

我不确定如何最好地解释这一点，但基本上我想要的是一个容器div，它是我屏幕的100％，里面有两个div，高度的50％。我想要它，以便用户可以在容器div的高度的20％-80％之间调整顶部div，并让较低的div自动填充容器而不会溢出它。我遇到了两个问题：

如果我将顶部div的高度设置为50％（使用CSS或DOMContentLoaded函数设置高度等于容器的offsetHeight的一半），它将不允许用户将其缩小到该尺寸以下
显然onresize在Chrome中的div中不起作用，所以我找不到修改下div高度的方法。

我的问题是：

这甚至可以吗？
在两个div之间添加一些元素并在其上使用html5 draggable会更好吗？我需要支持的唯一浏览器是Google Chrome。
或者我最好使用相框？

不允许使用外部JavaScript库。所以没有jQuery。

这是我到目前为止所拥有的：

<html>
<head>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function set_top_div_height() {
            var container_height = document.getElementById('container').offsetHeight;
            var top_div = document.getElementById('top');
            top_div.style.height = container_height / 2 + "px";
        });
    </script>
    <style type="text/css">
        div {
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            box-sizing:border-box;
        }

        #container {
            width: 100%;
            height: 100%;
            border: solid black 1px;
            overflow: hidden;
        }

        #top {
            width 100%;
            min-height: 20%;
            max-height: 80%;
            resize: vertical;
            overflow: auto;
            border-bottom: solid black 1px;
            background-color: #333;
        }

        #bottom {
            width: 100%;
            height: 50%;
            background-color: #ccc;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="top">
        Top
    </div>
    <div id="bottom">
        Bottom
    </div>
</div>
</body>
</html>

Answer 1

好的，我找到了部分问题的答案，创建了一个函数来调整底部div并使用setTimeout来轮询更新。所以现在唯一的问题是，我怎样才能将顶部div的高度更改为50％而不会导致Chrome阻止它再次小于该尺寸？

Answer 2

不要设置顶部div的高度。

删除

top_div.style.height = container_height / 2 + "px";

将底部div的高度设置为100％

#bottom {
height:100%;
}

页面加载时，顶部div将为最小高度（20％）。而且还取决于内容的高度。

Answer 3

您应该做的是将min-height和max-height设置为两个div，并在调整大小时设置％height，使得两个高度的总和始终为100％。< / p>

HTML

<div class="container">
  <div class="top_block"></div>
  <div class="bottom_block"></div>
</div>

CSS

div.container{ height: 100%; border: 1px solid salmon; }
div.container > div{ min-height: 20%; max-height: 80%; }
div.container > div.top_block{ height: 50%; background-color: lightgreen; }
div.container > div.bottom_block{ height: 50%; background-color: dodgerblue; }

正如您所看到的，两个div的高度都在最小20％到最大80％之间，您可以使用height来控制它。

如果将其设置为100％，则两个div的高度均为80％，因为它是您设置的最大值。

与min相同，如果将高度设置为0％，则会导致div的高度为20％。

由于你不想要溢出，你应该用javascript来控制％高度，当顶部div有70％的高度时，底部有30％的设置。

我希望它有所帮助！

Answer 4

好的，我找到了一个更好的解决方案，使用html5和draggable：

<html>
<head>
<script type="text/javascript">
    function update_size(ev) {
        ev.preventDefault();
        var top_div = document.getElementById('top');
        var bottom_div = document.getElementById('bottom');
        var left_height = document.getElementById('left').offsetHeight;
        var new_top_height = Math.floor(ev.clientY);
        var new_bottom_height = left_height - new_top_height - 4;
        top_div.style.height =  new_top_height + "px";
        bottom_div.style.height = new_bottom_height + "px";
    }

    function drop(ev) {
        ev.preventDefault();
        update_size(ev);
    }

    document.addEventListener("DOMContentLoaded", function () {
        var top_div = document.getElementById('top');
        var bottom_div = document.getElementById('bottom');
        var left_height = document.getElementById('left').offsetHeight;
        var new_top_height = Math.floor((left_height - 4) / 2);
        var new_bottom_height = left_height - new_top_height - 4;
        top_div.style.height =  new_top_height + "px";
        bottom_div.style.height = new_bottom_height + "px";
    });
</script>
<style type="text/css">
    body {
        margin: 0px;
    }

    div {
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }

    #container {
        width: 100%;
        height: 100%;
    }

    #left {
        width: 80%;
        height: 100%;
        float: left;
        clear: left;
    }

    #right {
        width: 20%;
        height: 100%;
        float: left;
        clear: right;
        border-left: solid black 1px;
    }

    #top {
        width 100%;
        height: 50%;
        overflow: auto;
        background-color: #333;
    }

    #seperator {
        width: 100%;
        height: 4px;
        background-color: black;
    }

    #bottom {
        width: 100%;
        height: 50%;
        overflow: auto;
        background-color: #ccc;
    }
</style>
</head>
<body>
<div id="container">
    <div id="left">
        <div id="top" ondrop="drop(event)" ondragover="update_size(event);">
            Top
        </div>
        <div id="seperator" draggable="true">
            &nbsp;
        </div>
        <div id="bottom" ondrop="drop(event)" ondragover="update_size(event);">
            Bottom
        </div>
    </div>
    <div id="right">
        Right
    </div>
</div>
</body>
</html>

如何在容器内部放置两个div，以便在调整其中一个时自动调整大小以填充容器？

4 个答案: