HTML5、CSS3 : Fixed size box with fluid to panel and rest-size bottom panel

Question

我花了很长时间在谷歌上搜索我的(相对)简单问题的答案，但一直找不到。

我想在我们基于 Web 的业务应用程序中有一个框(div？)，其高度为其父容器的 100%。在那个盒子里，应该有 2 个盒子，一个叠一个。

• 顶部框应根据其内容调整大小。 (绝不会超过总高度的 50%)。
• 底部框应获得剩余的高度。任何溢出都应该滚动。

最好不要使用 javascript，尤其是不要每 x 毫秒轮询一次高度的 javascript 计时器。

这个问题有解决办法吗？

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事件来绑定(bind)函数给它。你应该拥有所有你需要的工具来让它成为你现在想要的样子，我不可能确切地知道你想要什么或者你想要它如何表现

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 .然而，在我看来，最好的学习方法是亲自尝试元素