ThreeJS实现Canvas填充剩余空间的技术求助

我来帮你搞定这个问题～你现在的问题主要有两个核心点：一是CSS选择器不匹配导致样式失效，二是没用到合适的布局方式来让图表区域自动填充导航栏下方的剩余空间。

问题分析 #

1. 你的HTML里图表元素是id="chart"，但CSS里用的是.chart类选择器，这会导致样式根本作用不到目标元素上；
2. 直接给元素设置height:100%需要父级元素有明确的高度值，而且就算父级高度生效，这样设置也会让图表区域和导航栏的高度叠加，超出页面范围出现滚动条。

解决方案 #

我们可以用Flex布局来轻松实现需求，同时修复选择器和父元素高度的问题：

修改后的HTML

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

修改后的CSS

/* 先给根元素和body设置全屏高度，去掉默认边距避免布局偏移 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100vw;
  height: 100%;
  /* 使用flex垂直布局，让子元素按垂直方向排列 */
  display: flex;
  flex-direction: column;
}

.nav {
  height: 40px;
  background-color: red;
}

/* 用id选择器匹配图表元素，flex:1让它自动填充容器剩余空间 */
#chart {
  width: 100%;
  flex: 1;
  /* 加个背景色方便直观看到效果，实际使用时可以替换成Canvas样式 */
  background-color: #f0f0f0;
}

关键修改说明 #

• 给html和body设置height:100%，确保.wrapper的height:100%能正确继承全屏高度；
• .wrapper启用flex布局并设置垂直方向，让导航栏和图表区域自动垂直分布；
• 给#chart设置flex:1，这个属性会让它自动占据容器中除导航栏之外的所有剩余空间；
• 修复选择器不匹配的问题，从.chart改为#chart，确保样式能正确作用到图表元素。

这样修改后，图表区域就会完美填充导航栏下方的剩余空间啦～

内容的提问来源于stack exchange，提问作者BAR