CODEWITHSUNDEEP
htmlcss
Jack
Jack

Reputation: 491

How to get a div that does not overflow to fill the entire height when the page scrolls down?

I have a pop-up in my webpage and for it to stand out I have another div (blurDiv) that is basically a white background with 80% opacity between the pop-up and the webpage.

The issue I am having is that the webpage is longer than the viewport and blurDiv will fill the viewPort but it doesn't cover the part of the webpage under that when you scroll or even if you dont scroll but started scrolled down a bit the blurDiv starts from the top so it doesnt cover all the way to the bottom.

The HTML is basically

.blur {
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
    z-index: 2;
    min-height: 100vh;
    min-width: 100vw;
    background-color: rgba(255,255,255, 0.8);
}
<body>
  <section class='section' >
    <h1 class='header'>Header</h1>
    
    <table class='table'>....</table>
    
    <div class="popup-div hide">........</div>
    
    <div class="blur hide" id="blur"></div>
    
  </section>
</body>

I have tried putting the div outside the section directly under the body. I have also tried setting the body and/or the section min-width and min-height to 100vw and 100vh and setting both or either to relative to be the parent of the blurDiv. Ive also tried 100% instead of 100vw & 100vh. Tried setting right and bottom to 0, also tried without overflow auto.

None of those seems to help....

Any help would be appreciated

Upvotes: 0

Views: 91

Answers (1)

chaitanya
chaitanya

Reputation: 188

try doing:


.blur {
    position: fixed;
    top: 0;
    left: 0;
    overflow: auto;
    z-index: 2;
    min-height: 100%;
    min-width: 100vw;
    background-color: rgba(255,255,255, 0.8);
}
.popup_div{
    position: absolute;
    top:10px;

}

and for hidding the pop-up

.hide{
    display: none;
}

Upvotes: 0

Related Questions