如何让Canvas在标题下方带边距铺满页面？修正并排布局

问题核心在于原布局使用默认横向flex排列，导致标题与Canvas并排，且未对Canvas尺寸做合理约束。以下是修改后的代码及说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shark?</title>
    <style>
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            display: flex;
            flex-direction: column; /* 改为垂直排列 */
            min-height: 100vh; /* 容器至少占满视口高度 */
            padding: 0;
            margin: 0;
        }
        h1 {
            margin: 16px; /* 给标题添加上下边距，和Canvas边距统一 */
        }
        canvas {
            background-color: dodgerblue;
            margin: 0 16px 16px 16px; /* 左右下各16px边距 */
            flex: 1; /* 自动填充容器剩余高度 */
            width: calc(100% - 32px); /* 宽度减去左右边距总和 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>shark?</h1>
        <canvas></canvas>
    </div>
</body>
</html>

关键修改说明： #

• 垂直布局：将.container的flex-direction设为column，使标题和Canvas垂直堆叠，标题自动位于上方。
• 边距控制：给Canvas设置margin: 0 16px 16px 16px，同时用calc(100% - 32px)计算宽度，确保Canvas与窗口边缘保留16px边距且不会溢出。
• 剩余空间填充：Canvas的flex: 1属性会让它自动填充容器中标题下方的所有剩余空间，实现铺满效果。
• 盒模型优化：给html、body和Canvas添加box-sizing: border-box，避免边距和内边距导致元素尺寸超出容器。

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