Canvas元素尺寸溢出父div容器的原因及修复方法

问题现象 #

Canvas元素（带绿色外轮廓）渲染高度超出父级div容器范围，效果如下：

问题成因 #

• 父容器布局逻辑错误：#content使用默认块级布局，内部#menu占用了固定高度（含内边距、下边框），但#canvas-container设置的height: 100%是相对于#content的总高度计算，没有扣除#menu的占用空间，导致canvas容器本身高度就已经和menu高度叠加后超出父级总高度，canvas撑满容器自然溢出。
• 元素默认属性问题：<canvas>默认是行内替换元素，会按照行内元素基线对齐规则，在底部自动预留几像素的行高空白，进一步加剧溢出。
• JS适配逻辑缺陷：适配函数执行时机过早，页面布局未完成时取到的尺寸不准确；同时仅在初始化时执行一次适配，窗口尺寸变化时不会重新计算，也没有绑定父容器作为尺寸参考，容易把边框、外轮廓的额外尺寸算入canvas大小。

修复方案 #

1. 调整SCSS样式 #

核心是给#content开启纵向flex布局，让子元素自动分配剩余空间，同时修正canvas的显示属性：

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    font-size: 16px;
    font-family: 'Inter', sans-serif; // 修复原代码末尾多余的逗号语法错误
}

#container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    #content {
        outline: 2px solid rgb(0, 0, 0);
        width: 80%;
        height: 80%;
        display: flex; // 开启纵向flex布局
        flex-direction: column; // 子元素纵向排列

        #menu {
            padding: 1em;
            border-bottom: 2px solid black;

            select {
                padding: 1em;
            }

            a {
                background-color: rgb(91, 134, 195);
                text-decoration: none;
                font-weight: bold;
                padding: 0.8em;
                color: white;
            }

            a:hover {
                background-color: rgb(75, 122, 189);
            }

        }

        #canvas-container {
            width: 100%;
            flex: 1; // 替换原height:100%，自动占满menu之外的剩余高度
            overflow: hidden; // 兜底防止内容溢出

            canvas {
                outline: 2px solid green;
                display: block; // 转为块级元素，消除行内基线空隙
            }
        }

    }

}

2. 调整JS适配逻辑 #

把适配逻辑延后到布局完成后执行，增加resize监听，直接取父容器的可用尺寸作为canvas的渲染尺寸：

// 等DOM加载完成后再执行初始化
document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.querySelector('canvas');
    const container = document.getElementById('canvas-container');
    
    // 初始化适配
    fitToContainer(canvas, container);
    // 监听窗口尺寸变化，重新适配
    window.addEventListener('resize', () => fitToContainer(canvas, container));
})

function fitToContainer(canvas, container){
  // 视觉上撑满父容器
  canvas.style.width ='100%';
  canvas.style.height='100%';
  // 以父容器的可用内容尺寸设置canvas内部分辨率，避免拉伸模糊
  canvas.width  = container.clientWidth;
  canvas.height = container.clientHeight;
}

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