Overlay全屏高度适配问题求助（820px-1280px视口）

• 需求：点击触发后添加overlay类的<div id="overlay"></div>，其中的半透明背景需铺满整个屏幕高度，包括页面滚动后的区域。
• 异常表现：当笑话块数量较多导致页面出现滚动时，遮罩层背景无法拉伸至全屏；页面为静态高度时显示正常，问题集中在820px-1280px的媒体查询区间。
• 已尝试无效方案：设置body {height: 100vh / 100%}、.overlay{min-height:100vh / 100%}，但出现横向滚动条时，body和遮罩层均无法随页面内容拉伸。

相关代码 #

HTML结构 #

<!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>

CSS（Tailwind）代码 #

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 ;
            }
     }
}

解决方案 #

1. 修改遮罩层定位与尺寸设置 #

将遮罩层的absolute定位改为fixed，并使用视口相关属性确保覆盖全屏：

.overlay{ 
    @apply fixed top-0 left-0 right-0 bottom-0 w-screen min-h-screen pointer-events-auto;
    z-index: 11;
    background-color: rgba(0, 0, 0, 0.5);
}

• 原因：fixed定位相对于视口固定，不会随页面滚动偏移；w-screen和min-h-screen确保覆盖当前屏幕的宽高，同时去掉硬编码的left-[-32px]避免布局偏移。

2. 调整全局溢出设置 #

移除body,html的overflow: auto，仅在内容容器设置滚动，避免全局滚动影响遮罩层：

body,html{ 
    @apply min-h-screen;
    overflow-x: hidden; /* 防止不必要的横向滚动 */
}

.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 }
}; 

3. 修正层级关系 #

将.overlay的z-index设为11，确保其层级高于侧边栏的z-index:10，保证遮罩层能覆盖侧边栏。

内容的提问来源于stack exchange，提问作者Heorhii Madzharov