滾動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

回答

相關問題