JavaScript设置Div内Canvas尺寸时出现布局异常求助

这个问题我之前也踩过坑，核心原因是Canvas作为替换元素的默认特性，加上你只设置了它的CSS显示尺寸、没同步画布自身像素尺寸导致的，咱们一步步拆解解决：

问题根源 #

1. 内联元素的垂直对齐留白：Canvas默认属于inline-block类的替换元素，vertical-align属性默认值是baseline，这会让它底部和文字基线对齐，留出几像素的空隙——就是这点空隙让父Div的高度被撑得超过100%，触发了滚动条。而普通Div是块级元素，不存在这个对齐留白问题。
2. CSS尺寸与画布像素尺寸脱节：你只通过style.width/height设置了Canvas的显示大小，但没设置它自身的width和height属性。这不仅会导致画布内容被拉伸变形，还可能因为浏览器的渲染计算，让实际占用空间超出父容器。

解决方案 #

方案1：修正垂直对齐+同步画布尺寸 #

直接在你的JS代码基础上补充调整：

const canvas = document.querySelector('.inner');
const parent = canvas.parentElement;

// 设置CSS显示尺寸
canvas.style.width = `${parent.clientWidth}px`;
canvas.style.height = `${parent.clientHeight}px`;

// 同步画布的实际像素尺寸（关键！避免内容拉伸）
canvas.width = parent.clientWidth;
canvas.height = parent.clientHeight;

// 消除底部留白
canvas.style.verticalAlign = 'top';

方案2：把Canvas设为块级元素（更简单） #

既然普通Div没问题，那咱们直接把Canvas变成块级元素，彻底解决内联对齐的问题：

const canvas = document.querySelector('.inner');
const parent = canvas.parentElement;

canvas.style.width = `${parent.clientWidth}px`;
canvas.style.height = `${parent.clientHeight}px`;
canvas.width = parent.clientWidth;
canvas.height = parent.clientHeight;

// 设为块级元素，和普通Div行为一致
canvas.style.display = 'block';

方案3：纯CSS+少量JS（适合静态/响应式布局） #

如果父容器尺寸固定或需要响应式变化，你甚至可以不用JS设置显示尺寸，直接用CSS让Canvas填满父容器，再用JS同步像素尺寸：

.inner {
  width: 100%;
  height: 100%;
  display: block; /* 或者用 vertical-align: top; 二选一即可 */
}

const canvas = document.querySelector('.inner');

// 同步画布尺寸的函数
function syncCanvasSize() {
  canvas.width = canvas.clientWidth;
  canvas.height = canvas.clientHeight;
}

// 初始化执行一次
syncCanvasSize();
// 窗口大小变化时自动更新（可选）
window.addEventListener('resize', syncCanvasSize);

为什么这样有效？ #

• vertical-align: top或display: block彻底消除了Canvas作为内联元素带来的底部空隙，确保它的高度完全等于父容器的高度。
• 设置Canvas的width和height属性，让画布的实际像素尺寸和CSS显示尺寸一致，既避免了内容拉伸变形，也保证了元素的实际占用空间和父容器完全匹配，不会超出边界触发滚动条。

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