如何调整HTML canvas占满全部可用宽度并贴合页面底部

核心优化逻辑 #

• 首先重置浏览器默认的边距与盒模型规则，消除默认样式带来的布局偏移，无需手动计算边距参数
• 采用CSS Grid实现区域划分，天然适配「顶部文本区A + 主体区（canvas + 侧边文本区B）」的布局结构，后续调整布局仅需修改Grid配置，维护成本极低
• 取消直接读取视口尺寸设置canvas宽高的逻辑，改为读取canvas父容器的实际渲染尺寸设置绘图缓冲区大小，既不会超出视口，也能避免canvas绘制内容拉伸模糊

完整实现代码 #

index.html #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    /* 全局样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    /* 页面整体占满视口，禁止溢出出现滚动条 */
    html, body {
      height: 100vh;
      overflow: hidden;
    }
    /* Grid划分全局布局：行高第一行自适应内容，第二行占满剩余高度 */
    body {
      display: grid;
      grid-template-rows: auto 1fr;
    }
    /* 顶部A区样式，可自定义内边距 */
    .top-area {
      padding: 12px 16px;
    }
    /* 主体区域Grid划分：列宽第一列占剩余宽度给canvas，第二列自适应内容给侧边B区 */
    .main-area {
      display: grid;
      grid-template-columns: 1fr auto;
    }
    /* 侧边B区样式，可自定义内边距、最小宽度 */
    .side-area {
      padding: 16px;
      min-width: 180px;
    }
    /* canvas容器占满分配的网格区域 */
    .canvas-wrap {
      width: 100%;
      height: 100%;
    }
    /* canvas CSS尺寸占满容器 */
    #my-canvas {
      display: block;
      width: 100%;
      height: 100%;
    }
  </style>
  <script src="index.js"></script>
</head>
<body>
  <!-- 顶部A区 -->
  <div class="top-area">
    <h1>Some fancy title</h1>
  </div>
  <!-- 主体区域 -->
  <div class="main-area">
    <!-- canvas容器 -->
    <div class="canvas-wrap">
      <canvas id="my-canvas"></canvas>
    </div>
    <!-- 侧边B区 -->
    <div class="side-area">
      <p>侧边额外文本内容</p>
    </div>
  </div>
</body>
</html>

index.js #

window.addEventListener('DOMContentLoaded', () => {
  const canvas = document.getElementById('my-canvas');
  const ctx = canvas.getContext('2d');
  const canvasWrap = canvas.parentElement;

  // 直接读取容器的实际渲染尺寸设置canvas绘图缓冲区
  canvas.width = canvasWrap.clientWidth;
  canvas.height = canvasWrap.clientHeight;

  ctx.fillStyle = "#7fdbbb";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
})

说明 #

如果后续需要响应窗口大小变化，只需要添加resize事件监听，在事件触发时重新读取容器尺寸更新canvas宽高即可，全程不需要手动计算任何边距、元素尺寸参数，布局调整全部通过CSS完成。

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