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

Question

I'm not sure how best to explain this, but basically what I want is a container div which is 100% of my screen with two divs inside that which are 50% of the height. 我不确定如何最好地解释这一点，但是基本上我想要的是一个容器div，它是屏幕的100％，其中两个div是高度的50％。 I want it so that the user can resize the top div between 20%-80% of the container div's height and have the lower div automatically fill the container without overflowing it. 我想要它，以便用户可以在容器div高度的20％-80％之间调整顶部div的大小，并让下部div自动填充容器而不会溢出容器。 I'm running into two problems: 我遇到两个问题：

If I set the height of the top div to 50% (either with CSS or a DOMContentLoaded function that sets height equal to one half of the container's offsetHeight) it will not allow the user to shrink it below that size. 如果将顶部div的高度设置为50％（使用CSS或DOMContentLoaded函数将高度设置为容器的offsetHeight的一半），则不允许用户将其缩小到该尺寸以下。
Apparently onresize does not work in divs in Chrome, so I can't find a way to modify the lower div's height. 显然onresize在Chrome的div中不起作用，因此我找不到修改下div高度的方法。

The questions I have are: 我的问题是：

Is this even possible to do? 这有可能吗？
Would it be better to just put some element between the two divs and use the html5 draggable on it? 最好只在两个div之间放置一些元素，并在其上使用html5可拖动对象？ The only browser I need to support is Google Chrome. 我需要支持的唯一浏览器是Google Chrome。
Or am I better off using frames? 还是我最好使用框架？

External javascript libraries are not allowed. 不允许使用外部JavaScript库。 So no jQuery. 所以没有jQuery。

Here's what I have so far: 这是我到目前为止的内容：

<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

Ok, I found the answer to part of my question by creating a function to resize the bottom div and using setTimeout to just poll for updates. 好的，我通过创建一个函数来调整底部div的大小并使用setTimeout来轮询更新来找到问题的答案。 So now the only question left is, how can I change the height of my top div to 50% without causing Chrome to then block it from going smaller than that size again later? 因此，现在剩下的唯一问题是，如何在不使Chrome浏览器随后阻止其再次变得小于该尺寸的情况下将我的顶级div的高度更改为50％？

Answer 2

dont set the height of top div. 不要设置顶部div的高度。

remove 去掉

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

set the height of bottom div to 100% 将底部div的高度设置为100％

#bottom {
height:100%;
}

top div will be min-height (20%) when page loads. 载入页面时，最上面的div将为最小高度（20％）。 And it depends on content height also. 而且还取决于内容的高度。

Answer 3

What you should do is set min-height and max-height to both divs and on resize set the % height in such a way that the sum of both heights always be 100%. 您应该做的是将min-height和max-height都设置为两个div，并在调整大小时设置百分比height ，以使两个高度的总和始终为100％。

HTML 的HTML

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

CSS 的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; }

As you can see, both divs will have height between min 20% and max 80% and you control this with the height . 如您所见，两个div的高度都将介于最小20％和最大80％之间，您可以通过height控制。

If you set it to 100%, both divs will have 80% height, because it is the max value you set to it. 如果将其设置为100％，则两个div的高度都将为80％，因为这是您为其设置的最大值。

The same to the min, if you set the height to 0%, it will cause the divs to have 20% height. 与最小值相同，如果将高度设置为0％，将导致div的高度为20％。

As you don't want an overflow, you should control the % heights with javascript in such a way that when the top div have 70% height the bottom have 30% set. 由于您不希望溢出，因此应使用javascript控制高度百分比，以使顶部div的高度为70％，底部div的高度为30％。

I hope it helps! 希望对您有所帮助！

Answer 4

Ok, I found a much better solution using html5 and draggable: 好的，我发现了使用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，以便在调整另一个div的大小时自动调整其大小以填充容器？

问题描述

4 个解决方案

解决方案1
0 2013-03-25 16:20:01

解决方案2
0 2013-03-25 16:28:41

解决方案3
0 2013-03-25 16:38:08

解决方案4
0 已采纳 2013-03-25 18:02:55

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

问题描述

4 个解决方案

解决方案1 0 2013-03-25 16:20:01

解决方案2 0 2013-03-25 16:28:41

解决方案3 0 2013-03-25 16:38:08

解决方案4 0 已采纳 2013-03-25 18:02:55

解决方案1
0 2013-03-25 16:20:01

解决方案2
0 2013-03-25 16:28:41

解决方案3
0 2013-03-25 16:38:08

解决方案4
0 已采纳 2013-03-25 18:02:55