已定义高度但Scrollbar仍无法正常工作的技术求助

你的#content容器滚动条失效，核心问题出在高度设置和定位逻辑上，以下是针对性修复方案：

问题分析 #

• 你给#content设置了height: 600vw，这个值远大于可视区域高度，结合position: fixed会导致容器超出页面范围，滚动条可能被隐藏或无法正常触发
• 如果容器内部内容总高度没有超过容器高度，overflow: scroll只会显示灰色无效滚动条
• 额外添加的display: flex若没有配套布局逻辑，会干扰内部元素的高度计算，反而影响滚动触发

修复步骤 #

1. 重置容器高度为可视区域剩余空间 #

因为top: 8vw，容器高度应该设为页面可视高度减去顶部栏的高度，确保容器只占合理的可视范围：

#content
{
    opacity: 1;
    animation: fade 1.5s cubic-bezier(0.37, 0, 0.36, 1);

    position: fixed;
    top: 8vw;
    left: 0;
    right: 0;

    width: 100vw;
    height: calc(100vh - 8vw); /* 关键修改：适配剩余可视高度 */
    overflow-y: auto; /* 仅在内容超出时显示垂直滚动条 */
}

2. 确保内部内容高度超过容器 #

滚动条生效的前提是内部内容总高度大于容器高度，可临时添加测试内容验证：

<div id="home">
    <p id="p0">Lorem</p>
    <p id="p1">Ipsum dolum</p>
    <p id="p2">Amet</p>
    <img src="./img/stock1.jpg" title="home">
    <!-- 添加足够多的测试内容让高度超过容器 -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

3. 移除不必要的display: flex #

如果没有使用flex布局的需求，直接删除该属性，避免干扰容器内部的高度计算逻辑。

4. 检查层级避免滚动条被遮挡 #

确保顶部栏#top_bar的z-index不会高于#content，防止滚动条被遮挡：

#top_bar {
    position: relative;
    z-index: 10;
}
#content {
    z-index: 5;
}

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