仿Windows95风格Paint页面Canvas垂直无法缩放问题求助

问题根源 #

1. resize绑定对象错误：你把resizable类加在外部#paintbox上，但内部.canvas是绝对定位，脱离了文档流——父容器垂直拉伸时，绝对定位的子元素不会自动继承高度变化；而水平方向能“生效”，是因为你没给Canvas设置固定宽度/right限制，父容器变宽后，Canvas的宽度没被限制死，可以自然扩展。
2. 像素高度与百分比高度的本质区别：百分比高度是相对父容器计算高度，父容器被resize调整后高度变化，子元素会同步更新；但固定像素高度是静态硬值，除非用JS监听父容器尺寸变化手动修改，否则不会自动跟着父容器调整。

可行解决方案 #

方案1：让Canvas自动适配父容器尺寸（推荐，贴合Win95布局逻辑） #

修改.canvas的定位规则，用top/right/bottom/left替代固定高度，让它自动填满父容器的可用区域：

.canvas {
  display: block;
  position: absolute;
  left: 60px;
  top: 60px; /* 保留顶部偏移，对应原布局的工具栏高度 */
  right: 10px; /* 右侧留边，匹配原样式的margin-right */
  bottom: 10px; /* 底部留边，替代原固定min-height */
  min-width: 463px;
  min-height: 250px; /* 保留最小尺寸限制，防止缩得太小 */
  outline: black 1px solid;
  outline-style: inset;
  outline-offset: -2px;
  border-left: 1px #7b7b7b solid;
  border-bottom: 1px white solid;
  border-right: 1px white solid;
  border-top: 1px #7b7b7b solid;
  background-color: white;
  color: black;
  box-shadow: inset 0 2px 0 0 black, inset 2px 0 0 0 black;
}

这样拖拽#paintbox缩放时，Canvas会自动拉伸/收缩，垂直方向不再被min-height卡死。

方案2：把resize类直接绑到Canvas上 #

如果希望Canvas能独立拖拽缩放，不需要依赖父容器，直接将resizable类移到.canvas元素上，同时调整父容器的最小尺寸给Canvas留出空间：

#paintbox {
  min-width: 700px; /* 调整为Canvas最小宽+左右偏移的总和 */
  min-height: 330px; /* 调整为Canvas最小高+上下偏移的总和 */
  /* 其他原有样式保留 */
}

.canvas.resizable {
  overflow: hidden;
  resize: both;
  /* 其他原有Canvas样式保留 */
}

这种方式下，你可以直接拖拽Canvas的边角进行缩放，不受父容器的限制。

额外说明 #

你之前用百分比高度能生效，就是因为百分比是相对父容器高度计算的——父容器被resize改变高度后，Canvas的百分比高度会重新计算；而固定像素高度是静态值，不会随父容器变化，这就是两者的核心差异。

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