如何在固定Navbar下方实现仅指定DIV内的滚动效果

嘿，我来帮你搞定这个滚动区域的问题！你已经通过margin-top:80px让内容避开了固定导航栏，这一步做得很对。要实现指定DIV内部滚动、不影响页面其他区域的效果，只需要给目标DIV添加两个关键样式就可以了。

修改后的代码示例 #

<div>
  <navbar style="position: fixed; top: 0; left: 0; width: 100%; overflow: hidden; height: 70px; background: #fff; z-index: 100;">导航栏内容</navbar>
  <div style="margin-top:80px; height: calc(100vh - 80px); overflow-y: auto;">
    <!-- 这里放你的长内容 -->
    我希望滚动效果就出现在这个DIV内。<br>
    测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>
  </div>
</div>

关键样式说明 #

• height: calc(100vh - 80px)：让目标DIV的高度等于整个视口高度减去顶部margin的80px，这样它刚好填满导航栏下方的所有屏幕空间。你也可以换成固定高度比如height: 600px，根据实际需求调整。
• overflow-y: auto：当DIV内的内容高度超过自身高度时，自动显示垂直滚动条；内容未超出时，滚动条会自动隐藏，不影响布局。

另外给导航栏加了background: #fff和z-index: 100，是为了防止下方滚动的内容透过导航栏显示出来，确保导航栏始终保持在最上层。

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