如何实现HTML Canvas响应式填充父元素？高度适配问题求助

问题根源分析 #

核心问题在于两点：一是Bootstrap的h-100类依赖父元素具备明确的高度上下文，仅添加该类不足以让容器获得有效高度；二是原代码通过getComputedStyle获取高度时，若父容器高度为auto会导致数值解析失败，无法正确设置Canvas高度。

分步解决方案 #

1. 修正HTML结构与Bootstrap类使用 #

确保所有父元素（从html到Canvas的直接容器）通过Flex布局建立高度上下文，避免height:100%失效：

<html class="h-100">
<body class="h-100 d-flex flex-column">
  <!-- 若有导航栏等固定元素，容器用flex-grow-1占满剩余空间 -->
  <div class="container flex-grow-1 d-flex p-0">
    <canvas id="myCanvas"></canvas>
  </div>
</body>
</html>

• d-flex flex-column：让body子元素按垂直方向排列，为flex-grow-1提供布局基础
• flex-grow-1：让容器占满导航栏之外的剩余高度（无固定元素可省略）
• p-0：移除container默认左右内边距，避免Canvas出现空隙

2. 给Canvas添加基础CSS样式 #

区分Canvas的显示尺寸（CSS控制）与绘图分辨率（JS控制），先让Canvas占满容器：

#myCanvas {
  display: block; /* 消除inline-block默认的底部间隙 */
  width: 100%;
  height: 100%;
}

3. 优化JavaScript代码 #

放弃getComputedStyle解析单位的方式，直接用clientWidth/clientHeight获取容器可视尺寸（无需处理单位），同时初始化时立即调用尺寸设置：

const canvas = document.getElementById('myCanvas');

// 监听窗口resize事件
window.addEventListener('resize', setCanvasSize, false);
// 页面加载完成后立即初始化尺寸
setCanvasSize();

function setCanvasSize() {
  // 获取容器实际可视宽高
  const containerWidth = canvas.parentElement.clientWidth;
  const containerHeight = canvas.parentElement.clientHeight;

  // 设置Canvas绘图分辨率，匹配容器显示尺寸
  canvas.width = containerWidth;
  canvas.height = containerHeight;

  // 可选：如需保持固定宽高比，添加以下逻辑
  // const aspectRatio = 16 / 9; // 示例16:9比例
  // canvas.height = canvas.width / aspectRatio;
  // 此时需调整CSS让Canvas居中显示，避免拉伸
}

4. 额外排查点 #

• 检查页面中是否有其他元素（如固定footer、margin/padding）占用高度，导致容器无法满屏
• 查看浏览器控制台containerHeight输出值，若仍为0，说明父容器高度上下文未正确建立，需重新检查Flex布局类的使用

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