ASP.NET Core MVC实现响应式侧边栏后RenderBody页面无法滚动问题

页面冻结、无法滚动的核心诱因是全局CSS中给body标签配置了overflow: hidden属性，该属性会直接禁用整个页面的滚动条渲染，所有超出浏览器视口范围的内容都会被裁切，无法通过滚动查看。
除此之外现有代码还存在三个配套问题，即使修复滚动属性也会出现布局错乱：

1. 主内容区样式类名和实际DOM不匹配，预留的侧边栏偏移规则完全不生效，内容会被固定定位的侧边栏遮挡
2. calc()函数语法错误，运算符两侧未加空格，浏览器无法识别计算值
3. 顶部菜单栏未配置对应偏移，会和侧边栏位置重叠

• 第一步：修改body的溢出控制规则，删除原有overflow: hidden配置，改为仅隐藏横向溢出、保留纵向滚动能力，修改后的body样式如下：

body {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

• 第二步：替换原有不生效的.home_content相关样式，匹配你实际布局里的#main顶部栏和.container内容容器，配置正确的侧边栏偏移，注意修正calc语法：

/* 顶部菜单栏偏移 */
#main {
    position: relative;
    left: 78px;
    width: calc(100% - 78px);
    padding: 10px 20px;
    transition: all 0.5s ease;
}

/* 主内容容器偏移 */
.container {
    position: relative;
    min-height: 100vh;
    width: calc(100% - 78px);
    left: 78px;
    padding: 0 20px 20px;
    transition: all 0.5s ease;
}

/* 侧边栏展开时的偏移规则 */
.sidebar.active ~ #main {
    left: 240px;
    width: calc(100% - 240px);
}
.sidebar.active ~ .container {
    left: 240px;
    width: calc(100% - 240px);
}

• 第三步：补全侧边栏切换交互逻辑（如果尚未实现），将下面的脚本放在_Layout.cshtml的脚本区块中，确保点击菜单按钮可以正常切换侧边栏展开/收起状态：

document.querySelector('#btn').addEventListener('click', function () {
    document.querySelector('.sidebar').classList.toggle('active');
});

如果之前写的openNav()函数逻辑和上述代码重复，直接删除即可，避免事件冲突。

修改完成后刷新页面即可验证效果：

• 页面内容高度超出视口时，会正常显示纵向滚动条，可自由滚动查看所有内容，无冻结问题
• 侧边栏收起、展开时，顶部栏和主内容区会平滑跟随偏移，不会被侧边栏遮挡
• 页面横向无多余滚动条，布局适配正常

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