0

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

  1. 如果我将顶部 div 的高度设置为 50%（使用 CSS 或将高度设置为容器 offsetHeight 一半的 DOMContentLoaded 函数），它将不允许用户将其缩小到该大小以下。

  2. 显然 onresize 在 Chrome 中的 div 中不起作用，所以我找不到修改较低 div 高度的方法。

我的问题是：

  1. 这甚至可能吗？
  2. 在两个div之间放置一些元素并使用html5可拖动会更好吗？我需要支持的唯一浏览器是 Google Chrome。
  3. 还是我最好使用框架？

不允许使用外部 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>
4

4 回答 4

0

不要设置顶部 div 的高度。

消除

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

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

#bottom {
height:100%;
}

页面加载时，顶部 div 将是最小高度 (20%)。它还取决于内容高度。

于 2013-03-25T16:28:41.880 回答
0

你应该做的是设置divmin-height和max-height调整大小时设置 %height以使两个高度的总和始终为 100%。

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% 的高度，因为它是您设置的最大值。

与最小值相同，如果将高度设置为 0%，则会导致 div 具有 20% 的高度。

由于您不希望溢出，因此您应该使用 javascript 控制 % 高度，这样当顶部 div 的高度为 70% 时，底部的高度为 30%。

我希望它有帮助！

于 2013-03-25T16:38:08.103 回答
0

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

于 2013-03-25T16:20:01.760 回答
0

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

<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>
于 2013-03-25T18:02:55.320 回答