I would like to expand the background-color: rgba(0, 0, 0, 0.5) of <div id="overlay"></div> to cover the entire height of the screen.<div id="overlay"></div> when clicked on with the class 'overlay'. However, the height does not extend to full height when there are multiple joke blocks displayed. The issue occurs specifically in the media screen range of 820px-1280px (https://i.sstatic.net/4i63WcLj.png) (https://i.sstatic.net/lGSkyjS9.png) I have attempted setting body {height: 100vh or 100%} and also tried .overlay{min-height:100vh or 100%}. Unfortunately, when the horizontal scroll appears, neither the body nor overlay stretch properly.
<!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 ;
}
}
} `