Question

我花了很多年的时间来搜索谷歌，以寻找我（相对）简单问题的答案，但却找不到答案。

我希望在我们基于Web的业务应用程序中有一个框（div？），其高度为其父容器的100％。在那个盒子里，应该有两个盒子，堆叠在一起。

顶部框应根据其内容调整大小。（永远不会超过总高度的50％）。
底部框应该达到其余的高度。任何溢出都应滚动。

最好不要使用javascript，特别是没有每隔x毫秒轮询高度的javascript计时器。

这是结果的模型： Image of Problem

这个问题有解决方案吗？

Answer 1

看第三次编辑，这是最好的解决方案

我相信类似的东西尽可能接近（假设它们的结构与我相信的那样）

/* HTML */
<div id='container'>
    <div id='top'></div>
    <div id='bottom'></div>
</div>

/* CSS */
#container {
    width:300px; /* I assume the width/height is fixed */
    height:200px;
    border: 1px solid black;
    padding:4px; /* To remove the horiz scrollbar with width:100% and a border */
    overflow:hidden; /* Hide the content at the bottom to allow scroll */
}
#top {
    width:100%;
    max-height:50%; /* Using max-height allows it to size to smaller content */
    overflow:auto; /* Allow a scrollbar if necessary */
}
#bottom {
    height:100%; /* Take up the remaining space */
    overflow:auto; /* Allow a scrollbar if necessary */
}

Demo here

在旁注中，您的问题应该包括问题，与问题相关的代码以及您尝试解决方案。通过这种方式，我们可以准确了解您的问题，看看您自己尝试过解决方案，并使用实际代码进行修复

修改

为了完全按照您的意愿获得它，您可以使用一点点javascript

var parent = document.getElementById('container'), top = parent.children[0], bottom = parent.children[1]; bottom.style.height = parent.offsetHeight - top.offsetHeight - 8 + "px"; // The 8 comes from the vertical padding of the parent + 4 (not sure what the 4 // is from, probably the four vertical padding widths). The actual number could // be calculated dynamically, but that would require using getComputedStyle and // is more work than it's worth since borders/padding don't change dynamically

Demo here

如果您不关心格式化，那么您可以通过
在一个长行中完成
document.getElementById('bottom').style.height = document.getElementById('container').offsetHeight - document.getElementById('top').offsetHeight - 8 + "px";

需要使用Javascript，因为您无法像希望的那样在纯CSS中根据另一个元素的变量高度设置高度。有关offsetHeight，look here
的更多信息

第二次修改

如果必须让它响应输入（我使用contenteditable），您可以使用onclick和onkeyup事件将函数绑定到它。您应该拥有所需的所有工具，以便按照您现在的需要制作它，我不可能确切地知道您想要什么或者您希望它如何表现

top.onkeyup = function() { bottom.style.height = parent.offsetHeight - top.offsetHeight - 8 + "px"; } top.onkeyup(); top.onclick = function() { top.onkeyup(); }

Demo here

第三次修改

不知道为什么我之前没想过这个，但这对于flexbox来说是一个完美的情况。它更简单，更直观，更易于操作。附：我在演示中包含了浏览器前缀

#container { ... overflow:hidden; /* Hide overflow */ /* I excluded vendor prefixes for the sake of brevity, they're in the demo */ flex-flow: column; /* Makes content flow down instead of across */ display: flex; } #top { ... max-height:50%; /* Sets the max height... */ overflow:auto; /* Make sure scrollbar is there */ box-flex: none; flex: none; /* In essence, this acts like `height:auto` */ } #bottom { ... border:1px solid red; overflow:auto; /* Make sure scrollbar is there */ flex: 2; /* Can be any positive number in this case */ }

Awesome CSS only demo here。有关flexbox的更多信息，请查看this article，this video series and post以及some examples。但是，学习它的最好方法是在我看来自己尝试项目

HTML5，CSS3：固定尺寸的盒子，带有流体到面板和剩余尺寸的底部面板

1 个答案: