Question

我在标签容器中使用Three.js画布，但由于某些未知原因，3D视口没有加入全宽和＆amp;父元素的高度。

@description

我有2个标签，第一个标签在第二个标签中处于活动状态，我有3D视口（画布）。

  <div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
    <div id="test1" class="col s12">Test 1</div>
    <div id="test2" class="col s12">
      <div id="canvas3D"></div>
    </div>
    <div id="test3" class="col s12">Test 3</div>
    <div id="test4" class="col s12">Test 4</div>
  </div>

jsfiddle example

Answer 1

CSS代码上的

（VW）单元我只是说父宽度为

＃canvas3D {

宽度：计算（100vw - 60px）; 高度：计算（100vh - 60px）;

}

我希望有人会帮助他们：）

Three.js标签内的画布没有嵌入父元素的整个宽度和高度

1 个答案: