如何在不创建滚轮的情况下让 div 填充屏幕的剩余高度？

Question

我正在启动一个 WebGL 项目，并使用 Bootstrap 5 在顶部创建了一个功能性 NavBar。我正在尝试用画布填充剩余空间，我将在其中呈现我的作品。然而，使用height: 100%;，我猜似乎是在尝试高度不包括导航栏，并且在屏幕下方太远，创建了一个滚轮。

我正在创建一个此处显示的工作示例https://jsfiddle.net/cL40tzg9/6/，它将说明我的意思。我只是想创建一个 NavBar 并将剩余空间与我的画布一起使用，以防止任何不必要的滚动。我在这里做错了什么？谢谢

JavaScript 是（缩小了一点），

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand h1" style="cursor: default"> example </a>
  </div>
</nav>

<canvas id="scene_container"> </canvas>

使用 CSS，

html, body {
    height:100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

#scene_container {
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 0; 
}

Answer 1

将画布设置为全高减去导航高度的简单 Flex 方法可能看起来有点像这样。以下使用 css var --nav-height 为方便起见并应用背景颜色来说明效果。

:root{
  --nav-height:3rem;
}
html, body {
    height:100vh;
    max-height:100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
}


body,body *{
  box-sizing:border-box;
  margin:0;
}

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

nav{
  height:var(--nav-height);
  min-height:var(--nav-height);
  max-height:var(--nav-height);
  width:100%;
  flex:1;
  
  background:yellow;
}

canvas{
  width:100%;
  height:calc( 100vh - var(--nav-height) );
  flex:100;
  
  background:pink;
}

<nav class='navbar navbar-expand-lg navbar-light bg-light'>
  <div class='container-fluid'>
    <a class='navbar-brand h1' style='cursor: default'> example </a>
  </div>
</nav>
<canvas id='scene_container'></canvas>

Answer 2

如果nav 具有静态高度，则需要使用flex 或从canvas 中减去nav 的高度。

#scene_container {
    width: 100%;
    height: calc(100% - 64px);
    background: transparent;
    z-index: 0; 
}

64px 是您当前的导航高度。