2

I'm trying to do something very simple.
I have div with scroll, and I want the overlay div will cover all the height, including the scroll area. I've tried min-height:100% (like in this question) but it's not working.

Here is an example 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>
Community
  • 1
  • 1
cheziHoyzer
  • 4,803
  • 12
  • 54
  • 81

3 Answers3

5

  1. Add in cover as a child of the div that has your content.

  2. Position cover relative to the the content div using:

    .main > div {
  position: relative;
}

Let me know your feedback on this. Thanks!

.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>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
  • 1
    I had the same problem and this solution would not work. Until I realised that I had display: flex; on the main > div box. Removing display: flex made it work like a charm – Tonio Nov 05 '18 at 15:41
1

Change your height from height:100%; to height:100vh;

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

IT may be solution to your problem But you have to slightly change your structure.fiddle

Add .cover to inside div containing test
Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
priya_singh
  • 2,478
  • 1
  • 14
  • 32