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

Question

I am in the process of starting a WebGL project and have created a functional NavBar at the top using Bootstrap 5. I am trying to fill the remaining space with a canvas where I will be rendering my work. However using height: 100%; , to my guess seems to be trying height to not be including the NavBar and is going too far below the screen creating a scrolling wheel.

I am creating a working example shown here https://jsfiddle.net/cL40tzg9/6/ that will show what I mean. I am simply trying to create a NavBar and will the remaining space with my canvas, preventing any unwanted scrolling. What have I done wrong here? Thanks

The JavaScript is (minified a little),

<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>

with the CSS being,

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

A simple Flex approach to set the canvas to the full height minus the nav height might look a little like this. The following uses a css var --nav-height for convenience and background colours applied to illustrate the effect.

 :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

you either need to use flex or deduct the height of nav from canvas , if nav has static height.

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

64px is your current nav height.