html - 在隐藏的溢出 div 内滚动 div

Question

可以实现下面我想要的设计吗？

有条件:-
- 容器 position:absolute 将其粘贴到页面底部
- 容器最大高度:50%
- body div 可滚动，没有固定高度，而页面不可滚动

我想通过单击标题来切换正文 div 的可见性，以便标题 div 会粘在页面底部。

我尝试过:-

.container {
    max-height: 50%;
    bottom: 0;
    position: absolute;
    overflow: hidden;
        // this makes .body div not scrollable
        // when this set to auto, header div will also scrollable
}

.content-body {
    height: 100%;
    overflow: auto;
}

这是我创建的 fiddle :- https://jsfiddle.net/vwoz8rr5/1/
如果这是不可能的或者有更好的方法，我想知道。
如果需要的话我愿意提供必要的信息。 预先感谢您。

Answer 1

好吧，现在我更好地理解了你想要实现的目标，这是一个更好的 jsFiddle:
https://jsfiddle.net/jqnxjkr0/ 根据您的反馈提供更好的版本

在此版本中:

• .container 的最大高度设置为视口(viewport)高度的 50%。
• .content-header 可以具有可变的高度(例如多行)。
• .content-body 将占用剩余的可用高度。
• .content-body 内容太高无法滚动时可以滚动。

如果此版本适合您，您应该接受此答案而不是第一个答案。