如何实现不超出窗口的全屏Flexbox布局，支持Canvas等比例缩放？

你遇到的核心问题是：Canvas在flex布局的stretch对齐规则下，会被强行拉满水平宽度，但它自身的宽高比会让高度随之放大。当窗口宽度远大于Canvas原宽高比时，Canvas的高度会超出容器剩余可用空间，导致整个页面突破100vh的限制，上下UI元素被挤出视口。

下面是针对性的修改方案，既能保持Canvas按原比例自适应填充，又能确保页面整体始终在视口范围内：

关键修改思路 #

1. 给Canvas套一个容器，用百分比padding-top维持固定宽高比（padding百分比基于容器宽度，能精准匹配原比例）
2. 让容器在flex列布局中占据所有可用垂直空间，同时限制溢出
3. Canvas绝对定位填充容器，通过object-fit保证比例缩放且不超出容器

修改后的完整代码 #

<!doctype html>
<html>
  <head>
    <style>
body {
    padding: 0;
    margin: 0;
}

.fullpage {
    height: 100vh;
    overflow: hidden; /* 彻底防止页面整体溢出 */
}

.flexrow {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; /* 改为center让底部元素垂直居中 */
    padding: 1rem 0;
}

.flexcol {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 让上下UI固定在顶部和底部 */
    align-items: stretch;
}

.canvas-container {
    flex: 1; /* 占据标题和底部栏之外的所有垂直空间 */
    position: relative;
    width: 100%;
    padding-top: calc(200 / 320 * 100%); /* 按原宽高比计算：200/320=62.5% */
    overflow: hidden;
}

.canvas-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持比例，完整填充容器（不裁剪） */
    /* 如果需要填满容器（允许裁剪边缘），替换为object-fit: cover */
}
    </style>
  </head>

  <body>
    <div class="fullpage flexcol">
      <h1 style="text-align: center; margin: 1rem 0">Foo</h1>
      <div class="canvas-container">
        <canvas width="320" height="200" style="background: red"></canvas>
      </div>
      <div class="flexrow">
        <div style="margin: 0 1rem">Bar</div>
        <div style="margin: 0 1rem">Baz</div>
        <div style="margin: 0 1rem">Quux</div>
      </div>
    </div>
  </body>
</html>

核心修改说明 #

• 比例容器：.canvas-container的padding-top: calc(200 / 320 * 100%)是根据Canvas原宽320、高200计算的，确保容器高度永远是宽度的62.5%，完美匹配原比例。
• 空间分配：flex:1让容器自动填充上下元素之外的所有垂直空间，不会挤压标题和底部按钮栏。
• Canvas缩放：object-fit: contain保证Canvas按原比例缩放，最大程度填充容器同时完整显示，不会变形；如果需要完全填满容器（允许裁剪边缘），可以换成object-fit: cover。
• 溢出控制：.fullpage的overflow:hidden彻底避免页面出现滚动条，确保所有元素都在视口内。

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