Set overlay height equal to parent div, not equal toscreen height

Question

I want to highlight select div when mouse click event. To implement this, I used this code snippet

<div class="parent">
  <div class="overlay"></div>
  <div class="content">
    <div class="subcontent-1">
     ...
    </div>
    <div class="highlight">
    ...
    </div>
  </div>
</div>

To overlay, I used following css

.overlay{
    display:none;
    background: rgba(0, 0, 0, 0.44);
    z-index: 3;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

But this overlay only fill the screen height not the full page height (the parent div overflows screen height) This is how it looks like now I want stretch this overlay to the bottom of page, not height of screen.

If you want your `.overlay` to fit exactly the size of the parent, use `position: relative` on said parent, in addition to `position: absolute` on the `.overlay`. — Simplicius, Sep 22 '20 at 06:58
But when I use ```position:relative```, it doesn't showing the overlay — globalknowledge2, Sep 22 '20 at 07:10
This is what I meant https://codepen.io/SimplyCius/pen/XWdyLqK — Simplicius, Sep 22 '20 at 07:14
Glad I could help you. You might accept the answer below from @vodkaJedi. If however not so detailed, he meant exactly the same. — Simplicius, Sep 22 '20 at 07:24

score 3 · Accepted Answer · answered Sep 22 '20 at 06:57

3

Try add position: relative; to your parent div.

answered Sep 22 '20 at 06:57

vodkaJedi

337
6
12

score 1 · Answer 2 · answered Sep 22 '20 at 07:04

1

I found a answer I think the in the position:absolute property, bottom:0 is bottom of screen. When I used position:fixed it solved the problem. In this case the bottom:0 works as bottom of parent div(the page) The overlay is filled entire page.

answered Sep 22 '20 at 07:04

globalknowledge2

31
3

if you having a bigger height page that need to scroll.. i dont think `fixed` position will works in your case – Kopi Bryant Sep 22 '20 at 07:06
The page is currently overflows the screen height, as you can see in the image link. I use ```position:fixed``` and it solves problem. – globalknowledge2 Sep 22 '20 at 07:12

Set overlay height equal to parent div, not equal toscreen height

2 Answers2