如何实现网页与内容区域的统一滚动？

我有一个带透明黑色背景的main div（可透出底层背景并加深暗度），内部包含带文本的content div。添加文本后页面出现两个独立滚动区域：必须在content div内部滚动才能查看全部文本，只有点击main div的侧边空白区域滚动才能到达页脚。预期效果是整个页面仅存在一个滚动条，可直接滚动到页脚。

问题核心是main和content都设置了height:100vh和overflow:auto，强制它们各自成为独立的滚动容器。要实现全局滚动，需做以下修改：

• 移除body的height:100vh，让页面高度随内容自然撑开
• 移除main的position:sticky、height:100vh和overflow:auto，保留背景色和内边距维持视觉效果
• 移除content的height:100vh和overflow:auto，让内容自然撑开高度
• 给main和content添加上下内边距，优化内容与容器的间距

修改后的CSS代码 #

*{
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Courier New', monospace;
}
body{
    background: linear-gradient(-45deg, #ffe1c8, #ffebf3, #e6ebeb, #eeebd5);
    background-size: 400% 400%;
    animation: gradient 20s ease infinite;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
header{
    z-index: 10;
    backface-visibility: hidden;
    background: inherit;
    transition: 0.4s;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1%;
    display: flex;
    gap: 5%;
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.637);
}
header .logo{
    position: absolute;
    left: 5%;
    transition: all 0.2s;
    max-height: 65px;
}
header .topper{
    transition: ease-in;
    transition-duration: 0.4s;
    color: black;
    text-decoration: none;
    text-transform: uppercase;
    padding-left: 17%;
    letter-spacing: 1%;
    font-size: 50px;
}
header ul{
    position: absolute;
    display: flex;
    gap: 5%;
    list-style: none;
}
header ul li{
    padding-left: 4%;
}
header ul li a{
    transition: ease-in;
    text-decoration: none;
    color: black;
    font-size: 20px;
    letter-spacing: 2%;
}
header ul li label{
    transition: ease-in;
    font-size: 30px;
    margin-left: 100%;
}
header ul li a:hover{
    color: rgb(255, 255, 255);
    font-weight: 300;
    border: 2px rgba(255, 255, 255, 0.459);
    text-shadow: 2px 2px 3px rgb(0, 0, 0);
    transition: ease-in;
    font-weight: 200;
    transition-duration: 0.4s;
}
header ul li label:hover{
    color: rgb(255, 255, 255);
    font-weight: 300;
    border: 2px rgba(255, 255, 255, 0.459);
    text-shadow: 2px 2px 3px rgb(0, 0, 0);
    transition: ease-in;
    font-weight: 200;
    transition-duration: 0.4s;
}
header .topper:hover{
    color: rgb(255, 255, 255);
    transition: ease-in;
    transition-duration: 0.4s;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.466);
}
div ::-webkit-scrollbar {
    display: none;
}
div ::selection {
    background: rgba(255, 207, 144, 0.822);
    color: black;
}
div .main{
    color: white;
    z-index: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.712);
    padding-left: 13.7%;
    padding-right: 13.7%;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
div.content{
    color: white;
    z-index: 1;
    padding-left: 5%;
    padding-right: 4%;
    background: rgba(0, 0, 0, 0.384);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
div.content p{
    margin-top: 16px;
}
div.content h1{
    margin-top: 30px;
}
footer{
    z-index: 1;
    backface-visibility: hidden;
    background: inherit;
    width: 100%;
    padding: 25px 10%;
    box-shadow: -3px -2px 9px rgba(0, 0, 0, 0.637);
}
footer div.footer{
    flex-direction: column;
    display: flex;
    list-style: none;
}

HTML代码无需修改 #

保持原有的HTML结构即可，修改CSS后页面会自动触发全局滚动，滚动条可以直接从顶部滚动到页脚，文本内容也会随页面滚动完整展示。

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