コンテンツはスクロールバーを表示しますが、スクロールできません

Question

スクロールするコンテンツはありませんでしたが、メニューの後ろには表示しないでください。 それは透明なので難しいです。ですから私はdivをマスクとして使用します。 しかし何らかの理由で私のコンテンツがスクロールすることができません。

HTML：

<div class="title"> 
    title 
</div> 
<div class="menu"> 
    menu 
    <button class="btn">Foo</button> 
</div> 
<div class="content-mask"> 
    <div class="asfsadf"> 
    scroll content<br/> 
    scroll content<br/> 
    scroll content<br/> 
    scroll content<br/> 
    scroll content<br/> 
    </div> 
</div> 

CSS：

.title { 
    position: fixed; 
    top: 0; 
} 
.menu { 
    position: fixed; 
    top: 20px; 
    border: 1px solid black; 
} 
.content-mask { 
    position: fixed; 
    top: 40px; 
    overflow: scroll; 
} 
.content { 
} 
body { 
    background-image: url("https://pbs.twimg.com/media/ChtN47lVAAAQWD1.jpg:large"); 
} 

https://jsfiddle.net/clankill3r/34Lf1mke/

Answer 1

がする高さを追加します.content-マスク：

.content-mask { 
    position: fixed; 
    top: 40px; 
    overflow: scroll; 
    height: calc(100vh - 40px); 
} 

https://jsfiddle.net/8ha45uao/

それとも高さとオーバーフローを追加：コンテンツコンテナへの自動：

.asfsadf { 
    margin-top: 40px; 
    height: calc(100vh - 40px); 
    overflow: auto; 
} 

https://jsfiddle.net/34Lf1mke/3/

あなたは古いブラウザを気にする場合は、高さを計算するためにはJavaScriptフォールバックを行うことができます。

Answer 2

固定幅の100％の背景色を使用する必要があります。 そして、top-marginを "content-mask" divにfixed divの高さとして設定します。

Answer 3

がoverflow propertyを使用してコンテナをスクロールするために、この

.asfsadf{ 
width: 500px; 
height: 200px; 
overflow-y: scroll; 
overflow-x:hidden; 
} 

Answer 4

を試し、コンテナは固定の高さと幅を指定する必要があります。

ライブデモ：あなたのケースで
https://jsfiddle.net/0t8oh85y/

---

修正CSSがあります。

.title { 
    position: fixed; 
    top: 0; 
} 
.menu { 
    position: fixed; 
    top: 20px; 
    border: 1px solid black; 
} 
.content-mask { 
    position: fixed; 
    top: 40px; 
    left: 0px; 
    overflow-y: scroll; 
    max-height: calc(100% - 40px); 
    width: calc(100%); 
} 
.content { 
} 
html{ 
    width: 100%; 
    height: 100%; 
} 
body { 
    overflow: hidden; 
    background-image: url("https://pbs.twimg.com/media/ChtN47lVAAAQWD1.jpg:large"); 
    background-size:cover; 
    background-position: center center; 
    height: 100%; 
    width: 100%; 
} 

---