Laravel 5.8 + Bootstrap 4.1项目如何在不遮挡内容的前提下移除双重纵向滚动？

问题根因 #

出现双重滚动条、以及之前改样式后长内容被遮挡的核心逻辑很直接：

• 现有布局中，.member-wrapper、.content-wrapper这类内部容器被加了固定视口高度（如height:100vh）+ 内部滚动规则（overflow-y:auto），导致浏览器会在最外层<body>因为内容总高超出生成第一层滚动条，同时内部容器因为自身高度被锁死、内容溢出生成第二层滚动条，最终出现双滚动条。
• 之前调整样式时只删除了内部滚动规则，但没有同步移除容器被锁死的固定高度，导致容器无法跟随内容撑开，超出的部分被直接裁切，出现底部内容看不到的问题。

具体实操调整步骤 #

1. 全局定位触发问题的CSS规则 #

在项目的样式文件中搜索和布局类名相关的定义，重点排查.member-wrapper、.content-wrapper、.single-page这几个类，找到类似下面的问题代码：

/* 这类代码就是双滚动条的根源 */
.member-wrapper {
  height: 100vh;
  overflow-y: auto;
}
.content-wrapper {
  height: calc(100vh - 头部高度);
  overflow-y: auto;
}

2. 替换问题样式，关闭内部滚动 #

直接移除上面这类规则，替换成下面的逻辑，从根源取消内部滚动层：

• 给所有内部布局容器设置无溢出滚动的规则，让高度自动跟随内容撑开：

  .member-wrapper,
  .content-wrapper,
  .single-page {
    /* 彻底关闭内部滚动，让内容自然撑开容器 */
    overflow: visible;
    /* 删除所有锁死的固定高度值，不要加height:100vh这类规则 */
  }
  

• 如果需要实现侧边栏固定不随页面滚动的效果，不要通过父级容器锁高度实现，只给侧边栏单独加固定定位规则即可：

  /* 侧边栏单独固定，不影响父级容器的高度计算 */
  .member-sidebar {
    position: fixed;
    top: 头部导航的高度值;
    left: 0;
    height: calc(100vh - 头部导航高度);
  }
  /* 给右侧内容区加匹配侧边栏宽度的左外边距，避免被侧边栏遮挡 */
  .content-wrapper {
    margin-left: 侧边栏的实际宽度值;
  }
  

• 不需要额外给<body>加overflow:hidden这类规则，让浏览器默认的视口滚动自然生效——所有内容超出视口高度时，只会由最外层的body生成唯一的纵向滚动条，不会再有内部的滚动层。

3. 场景验证 #

调整完成后分别测试两类场景确认效果：

• 短内容场景：内容总高度小于视口高度时，页面不会出现多余的滚动条
• 长内容场景：动态加载的大段内容让总高度超过视口时，只会出现最外层的单一滚动条，所有底部内容可以正常滚动查看，不会出现遮挡、裁切的问题

提示：这类基于Laravel Blade渲染的服务端页面，不适合使用SPA类布局常用的「锁全屏高度+内部滚动」的结构，流式自适应撑高的布局方式，才能从根本上避免双滚动条、内容被裁切的问题。

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