如何让页面滚动条从top-section div下方开始显示 保证顶部导航占满全宽

你可以通过禁用全局滚动条，仅给内容区域单独加滚动的方式实现需求，改动如下： #

1. 新增全局基础样式 #

先重置默认边距，禁用页面整体滚动：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

2. 调整.top-section的CSS #

补全固定定位所需的宽高与定位属性，确保通栏铺满顶部：

.top-section{
  background-image: url('images/landscape-image.jpg');
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 7.5vh; /* 与下方内容区的margin-top数值保持一致 */
}

3. 调整.display的CSS #

给内容区域单独配置纵向滚动，高度适配剩余视口空间：

.display{
  background-size: 100% 100%;
  padding-bottom: 5vh;
  margin-top: 7.5vh;
  margin-bottom: 5vh;
  min-height: 100vh;
  /* 新增属性 */
  box-sizing: border-box;
  height: calc(100vh - 7.5vh); /* 运算符前后必须保留空格才会生效 */
  overflow-y: auto;
}

4. 修正HTML语法错误 #

你当前代码中内容容器用了React专属的className属性，原生HTML需要改为class：

<body>
  <div>
    <div class="col-12 top-section">
    
    </div>

    <div class="display col-11 col-md-9 col-lg-7 mx-auto">
        
    </div>
  </div>
</body>

修改完成后顶部导航会固定占满页面全宽，滚动条仅在导航下方的内容区域显示，完全匹配需求效果。

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