我不确定如何最好地解释这一点，但基本上我想要的是一个容器 div，它是我屏幕的 100%，里面有两个 div，高度的 50%。我想要它，以便用户可以在容器 div 高度的 20%-80% 之间调整顶部 div 的大小，并让较低的 div 自动填充容器而不会溢出它。我遇到了两个问题:
如果我将顶部 div 的高度设置为 50%(使用 CSS 或将高度设置为容器 offsetHeight 的一半的 DOMContentLoaded 函数)，它将不允许用户将其缩小到该尺寸以下.
显然 onresize 在 Chrome 的 div 中不起作用，所以我找不到修改下部 div 高度的方法。
我的问题是:
- 这有可能吗？
- 将一些元素放在两个 div 之间并在其上使用 html5 可拖动会更好吗？我唯一需要支持的浏览器是 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>
最佳答案
好的，我通过创建一个函数来调整底部 div 的大小并使用 setTimeout 仅轮询更新来找到部分问题的答案。所以现在剩下的唯一问题是，如何将顶部 div 的高度更改为 50%，而不会导致 Chrome 稍后阻止它再次小于该尺寸？
关于javascript - 我怎样才能在一个容器中有两个 div，以便在调整一个的大小时另一个自动调整大小以填充容器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15619370/