滚动div内隐藏溢出div

随着条件： -
- 集装箱position:absolute把它粘到
页的底部 - 集装箱max-height:50%
- 身体DIV是滚动能够在不固定的高度，而网页不能滚动能够

我想通过点击标题来切换body div的可见性，所以header 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/
如果这是不可能的，或者有更好的方法，我想知道。
如果需要，我想提供必要的信息。预先感谢您。

来源

2017-02-05 Aldo Ginting

刚刚更新了我的答案与更好的jsFiddle给你一个可滚动内容的演示。（尽管如果你想正确地匹配你的约束条件，你必须添加最大高度：50％的规则，你是否想让我创建另一个小提琴？） – daformat

根据我们的讨论添加了更好的小提琴的另一个答案。考虑接受最后一个答案，而不是第一个答案。 – daformat

@daformat好的。非常感谢 –

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

在这个版本：

.container有一个最大高度设置为视口高度的50％。
.content-header可以具有可变的高度（例如多行）。
。内容体将占用剩下的可用高度。
。内容太高而不适合时，可以滚动内容体。

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

来源

2017-02-05 12:50:53 daformat

编辑：看到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?

来源

2017-02-05 11:08:23 daformat

谢谢你的回答。我觉得有一点误会。我想要的是在你的小提琴中可以滚动的身体部位，它是页面的上半部分。我认为一点修改会使它工作。 –

也我需要容器高度为50％ –

这对你更好吗？ https://jsfiddle.net/aw5qt19x/6/ – daformat

滚动div内隐藏溢出div

回答

相关问题