Question

我在这里设置了一个基本示例http://jsfiddle.net/8nbpehj3/37/

<html>
  <body>
    <div class='wrapper'>
      <div class='nav'>
        <div class='button'>Button</div>
      </div>
      <div id='chart'></div>
    </div>
  </body>
</html>

.wrapper {
  width: 100vw;
  height: 100%;
}
.nav {
  height: 40px;
  background-color: red;
}
.chart {
  width: 100%;
  height: 100%;
}

顶部有一个红色导航栏，我希望画布填充剩余的空间。目前，它会占用可用空间并导致滚动。

如何才能让它正确填充尺寸？

Answer 1

如果我理解正确，图表元素是画布的容器。如果是这样，你可以用flexbox实现你想要的（我添加了背景颜色以突出显示区域）：

＆＃13;

html, body {
  padding: 0;
  margin: 0;
}

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.nav {
  height: 40px;
  background-color: red;
}
#chart {
  background-color: yellow;
  flex: 1;
}
#chart > canvas {
  display: inline-block;
}

＆＃13;

<html>
  <body>
    <div class='wrapper'>
      <div class='nav'>
        <div class='button'>Button</div>
      </div>
      <div id='chart'>Canvas here</div>
    </div>
  </body>
</html>

＆＃13;

我将display: inline-block添加到canvas元素中，因为我在过去发现没有它，这种技术可能会导致出现垂直滚动条。

ThreeJS Size Canvas填充空间

1 个答案: