侧边栏底部被页面窗口遮挡问题求助（附代码示例）

你的侧边栏底部被页面窗口遮挡无法显示，核心原因很明确：

• 顶部导航栏（navbar）占据了一部分垂直空间，但你给滚动侧边栏的.scrollable类设置了height:100vh，这意味着该容器会占满整个视口高度，加上导航栏的高度后，整体超出了页面的可视范围
• 同时html和body标签设置了overflow:hidden，超出视口的部分直接被隐藏，导致侧边栏底部内容无法显示；而移除导航栏后，.scrollable的高度刚好匹配视口，所以显示正常

以下是几种高效的修复方式，按灵活性和健壮性排序：

方案一：Flex布局适配（推荐） #

利用CSS Flex布局让页面自动分配剩余空间，无需硬写固定高度，适配不同导航栏高度：

修改CSS代码：

html,
body {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* 垂直排列页面元素 */
}

/* 让主内容容器填充导航栏下方的剩余空间 */
.container-fluid {
  flex: 1;
  overflow: hidden;
}

.scrollable {
  overflow-y: auto;
  height: 100%; /* 继承父容器的剩余高度 */
}

HTML结构无需改动，这种方式会自动适配导航栏的任意高度，即使导航栏在移动端折叠或高度变化，侧边栏也能保持正确的可滚动范围。

方案二：calc()计算精确高度 #

如果不想调整整体布局，可以直接用calc()函数减去导航栏的高度（Bootstrap 5默认导航栏高度为56px）：

修改CSS代码：

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

.scrollable {
  overflow-y: auto;
  height: calc(100vh - 56px); /* 减去导航栏的默认高度 */
}

注意：如果你的导航栏有自定义高度，需要将56px替换为实际的高度值。

方案三：固定导航栏+内边距预留空间 #

将导航栏设置为固定定位，同时给body添加对应高度的内边距，确保内容不会被导航栏覆盖：

修改CSS代码：

html,
body {
  height: 100%;
  overflow: hidden;
  padding-top: 56px; /* 预留导航栏的高度空间 */
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030; /* 确保导航栏在内容上方 */
}

.scrollable {
  overflow-y: auto;
  height: 100%;
}

这种方式适合需要导航栏固定在顶部的场景，同样需要根据导航栏实际高度调整padding-top的值。

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