如何在不創建滾輪的情況下讓 div 填充屏幕的剩余高度？

Question

我正在啟動一個 WebGL 項目，並使用 Bootstrap 5 在頂部創建了一個功能性導航欄。我正在嘗試用畫布填充剩余空間，我將在其中渲染我的作品。 但是使用height: 100%; ，我的猜測似乎是嘗試高度不包括 NavBar 並且在屏幕下方太遠創建一個滾輪。

我正在創建一個此處顯示的工作示例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

你要么需要使用flex或扣除的高度nav從canvas ，如果nav有靜態的高度。

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

64px是您當前的導航高度。