CSS - オーバーレイdivの高さ：スクロール領域を含む100％が機能していません

Question

私は非常に簡単なことをしようとしています。
私は、スクロールしてdivを持っている、と私は、オーバーレイdiv要素がスクロール領域含むすべての高さ、をカバーしますたいです。 min-height:100%（this questionのような）を試しましたが、機能しません。ここで

は一例でありhttps://jsfiddle.net/svfukxjd/2/

.main { 
 
    height: 300px; 
 
    width: 150px; 
 
    background: red; 
 
    overflow: auto; 
 
    position: relative; 
 
} 
 
.cover { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    bottom: 0; 
 
    background: green; 
 
    opacity: 0.5; 
 
}

<div class="main"> 
 
    <div> 
 
    Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    </div> 
 
    <div class="cover"> 
 

 
    </div> 
 
</div>

Answer 1

1. あなたのコンテンツを持つdiv要素の子としてcoverに追加します。使用してコンテンツのdivに

2. ポジションcover相対：

   .main > div { 
       position: relative; 
   } 
   

を私はこれについてあなたの意見を知ってみましょう。ありがとう！

.main { 
 
    height: 300px; 
 
    width: 150px; 
 
    background: red; 
 
    overflow: auto; 
 
    position: relative; 
 
} 
 
.main > div { 
 
    position: relative; 
 
} 
 
.cover { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    bottom: 0; 
 
    background: green; 
 
    opacity: 0.5; 
 
}

<div class="main"> 
 
    <div> 
 
    Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <br>Test 
 
    <div class="cover"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

ITはあなたの問題を解決することができるが、あなたは少しあなたの構造を変更する必要があります。 fiddle

Add .cover to inside div containing test 

Answer 3

height:100%;から height:100vh;

.cover 
{ 
    position:absolute; 
    height:100vh; 
    width:100%; 
    top:0; 
    bottom:0; 
    background:green; 
    opacity:0.5; 
} 

にあなたの高さを変更