【问题标题】：Start scroll bar below a particular div在特定 div 下方开始滚动条
【发布时间】：2021-11-07 23:06:24
【问题描述】：

我有一个网页，顶部有一个导航 div (class="top-section")，然后是其他一些 div (class="display")。我希望右侧的滚动条从顶部类下方开始，以便顶部的 div 占据整个宽度。

两个 div 的 CSS 在这里

.top-section{
  background-image: url('images/landscape-image.jpg');
  background-size: cover;
  position: fixed;
  top: 0;
  z-index: 2;
}

.display{
  background-size: 100% 100%;
  padding-bottom: 5vh;
  margin-top: 7.5vh;
  margin-bottom: 5vh;
  min-height: 100vh;
}

身体结构如下

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

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

谢谢

【问题讨论】：

您的 HTML 结构如何？看看stackoverflow.com/help/minimal-reproducible-example
我在上面的代码中添加了 HTML for body 部分。
不可能！您可以做的是将除导航栏外的所有内容包装在一个 div 中，然后将 overflow-y: auto 设置为该特定 div，并确保删除像 body::-webkit-scrollbar { display: none } 这样的正文滚动条。
非常感谢。这确实解决了我的问题。

标签： html css scrollbar overflow

【解决方案1】：

一种可能的解决方案是拥有父子层次结构。

解决方案

让父 div 拥有

 background-image: url('images/landscape-image.jpg');
 background-size: cover;
 top: 0;

制作两个子 div，第一个带有标题的 div

 position: fixed;
 z-index: 2;
 top: 0;
 height: 2vh;

第二个类display有

 height: 98vh;
 overflow-y: scroll;

【讨论】：