cssresponsive-designheight

responsive height,full height background

https://chuk-norris-jokes.onrender.com/ I want to stretch the background-color: rgba(0, 0, 0, 0.5) of <div id="overlay"></div> to the full height of the screen.<div id="overlay"></div> get class 'overlay' onclick. But when there are a lot of joke blocks, the height is not stretched to the full height. When height is static everything is ok. Problem on media screen 820px-1280px (https://i.sstatic.net/4i63WcLj.png) (https://i.sstatic.net/lGSkyjS9.png) i tried to set body {height: 100vh or 100%} also i setted .overlay{min-height:100vh or 100%}. But when the horizontal scroll appears body and overlay dont stretch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chuck Norris Jokes</title>
</head>
<body>
<div id="overlay"></div>
        <div class="main_wrapper " id="mainWrapper">    
        <div class="content_wrapper">
                <header class="header" id="header">
                </header>
                <div class="title_wrapper" id="titleWrapper">
                
                </div>
                <div class="form_wrapper" id="formWrapper">
                </div>
                <div class="jokes_wrapper" id="jokesWrapper"> 
                </div>
        </div>   
        </div>
        <div class="sidebar hide" id="sideBar">
           
            <h3 class="sidebar_title">Favorite</h3>
            <div class="favorite_jokes_wrapper" id="favJokesWrap">
            </div>
        </div>
</body>
</html>

body,html{ @apply min-h-screen; overflow: auto;

}

.main_wrapper{ @apply p-5 overflow-auto container min-h-full m-auto w-full relative md:m-auto md:p-2 md:pt-5 xl:max-w-[960px] xl:m-0; .content_wrapper{ @apply xl:max-w-[600px] xl:m-auto }

}; 
.overlay{ @apply w-full absolute top-0  left-[-32px] bottom-0 right-0 min-h-full pointer-events-auto ;
z-index: 2;
background-color: rgba(0, 0, 0, 0.5);}

.sidebar{ @apply container bg-light_grey absolute z-10 top-0 min-h-screen right-0 md:w-[56%] xl:block max-w-[480px];}



.sidebar_title{
    @apply hidden xl:block xl:m-10 font-medium text-xl text-sub_main_color;
}
.favorite_jokes_wrapper{
    
    @apply flex flex-col mt-16 items-center justify-center min-h-full bg-light_grey xl:mt-5;
    .joke {
            @apply bg-white rounded-xl gap-5 md:pt-12 md:px-5 md:pb-5;  
            border: 1px solid #F8F8F8;
            box-shadow: 0px 4px 6px 0px #0000001A;
            div{
                @apply md:w-[298px];
            }
            p {
                @apply text-sm font-normal;
            }
            h3{
                @apply mt-0 bg-light_grey mt-2 text-10px ;
            }
     }
} `
Solution

  • It's because 100vh means 100 viewport height, when you scroll the overlay height doesnt change and gets scrolled away with the main_wrapper, I think what you need is the overlay to be fixed to the left of the screen so that it doesn't get scrolled along with the content

    The solution is to use fixed instead of absolute

    Ref:Using fixed