Bootstrap5导航栏下canvas填充屏幕剩余高度无滚动溢出问题求解

问题根因 #

你给#scene_container设置的height: 100%是相对于父元素<body>计算的，而你已经把<body>的高度设为了100%视口高度，加上顶部导航栏本身占用的高度，整体总高度超出了视口范围，自然会触发滚动条。

最优解决方案（适配Bootstrap响应式） #

用Flex布局实现自动分配剩余空间，改动量极小，且适配导航栏高度动态变化的响应式场景：

1. 给<body>新增flex布局规则，设置纵向排列：

body {
  display: flex;
  flex-direction: column;
}

2. 修改#scene_container的高度规则，用flex: 1替代原有height: 100%，同时消除canvas默认行内元素的底部留白：

#scene_container {
  width: 100%;
  flex: 1;
  background: transparent;
  z-index: 0;
  display: block;
}

你原有<html>、<body>的宽高、边距配置可以保留不需要修改。

备选方案（仅适合固定高度导航栏） #

如果你的导航栏高度固定不会随响应式布局变化，也可以直接用calc计算高度：

#scene_container {
  width: 100%;
  height: calc(100% - 56px); /* 56px是Bootstrap 5默认导航栏的高度，可根据实际调整 */
  background: transparent;
  z-index: 0;
  display: block;
}

这种方案的缺点是一旦导航栏高度变化（比如移动端折叠展开、导航内容换行），就会出现留白或者滚动条，适配性不如Flex方案。

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