如何让navbar宽度100%且滚动条从其下方开始显示？

核心思路 #

将fixed导航栏与内容区域分离，让内容区域单独拥有滚动条，而非整个页面滚动，这样滚动条就会从导航栏下方开始显示。

具体实现步骤 #

1. 固定导航栏样式：保持导航栏的position: fixed，设置好宽度、高度与顶部位置，确保它始终悬浮在页面顶部。

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px; /* 根据你的导航栏实际高度调整 */
  background-color: #333;
}

2. 调整内容区域布局：
   • 给内容容器设置margin-top，值等于导航栏高度，避免内容被导航栏遮挡。
   • 隐藏页面整体滚动条，让内容容器单独启用垂直滚动。

body {
  margin: 0;
  overflow: hidden; /* 隐藏页面整体滚动条 */
}

.content {
  margin-top: 60px; /* 与导航栏高度保持一致 */
  height: calc(100vh - 60px); /* 内容区域高度 = 视口高度 - 导航栏高度 */
  overflow-y: auto; /* 启用内容区域垂直滚动 */
}

3. HTML结构示例：

<div class="navbar">导航栏内容</div>
<div class="content">
  <!-- 页面所有内容都放在这里 -->
</div>

设置完成后，滚动条只会出现在导航栏下方的内容区域，完全匹配需求效果。

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