时间戳

首页 > 解决方案 > 如何在不创建滚轮的情况下让 div 填充屏幕的剩余高度？

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

问题描述

我正在启动一个 WebGL 项目，并使用 Bootstrap 5 在顶部创建了一个功能性 NavBar。我正在尝试用画布填充剩余空间，我将在其中渲染我的作品。但是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; 
}

标签： htmlcssthree.js

解决方案

将画布设置为全高减去导航高度的简单 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>

推荐阅读