Question

有可能实现我想要的设计吗？

有条件： -
- 容器position:absolute将其粘贴到页面底部
- 容器max-height:50%
- 当页面不可滚动时，body div可以滚动而没有固定的高度

我想通过点击标题来切换正文div的可见性，这样标题div就会粘在页面底部。

tes

我尝试了什么： -

.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;
}

我创造了这个小提琴： - https://jsfiddle.net/vwoz8rr5/1/
如果这是不可能的或有更好的方法，我想知道如果需要，我想提供必要的信息。提前谢谢。

Answer 1

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

在此版本中：

.container的最大高度设置为视口高度的50％。
.content-header可以有一个可变高度（例如多行）。
.content-body将占用剩余的可用高度。
.content-body可以在其内容太高而无法容纳时滚动。

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

Answer 2

修改：请参阅my other answer以获得更好的小提琴。

看起来像是一个很好的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?

在隐藏溢出div中滚动div

2 个答案: