滚动 div 隐藏溢出 div

Question

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

有条件：-
- 容器 position:absolute 将其粘贴到页面底部
- 容器 max-height:50%
- 主体 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

编辑： 参见以获得更好的 fiddle。

看来 flexbox 做的不错，这里有几个 jsFiddle 给你举个例子：

https://jsfiddle.net/aw5qt19x/ // Basic flexbox usage
https://jsfiddle.net/aw5qt19x/2/ // Based on your constraints / layout
https://jsfiddle.net/aw5qt19x/4/ // Working demo with js

最后，这是一个更全面的可滚动内容演示：
https://jsfiddle.net/aw5qt19x/5/// Final?

Answer 2

好的，既然我更了解你想要实现的目标，这里有一个更好的 jsFiddle：
https://jsfiddle.net/jqnxjkr0/Better version based on your feedback

在此版本中：

.container 的最大高度设置为视口高度的 50%。
.content-header 可以有可变高度（例如多行）。
.content-body 将占用剩余的可用高度。
.content-body 内容太高放不下时可以滚动。

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

滚动 div 隐藏溢出 div

Scroll div inside hidden overflow div

html

css

scroll

overflow