如何让页面main区域占据屏幕剩余空间（兼容底部footer）

我参考了StackOverflow上的《How can I make my flexbox layout take 100% vertical space?》问题，该问题和我的需求接近，但没涉及页面底部footer的处理。我希望页面中的<div class="main">能占据屏幕剩余空间，目前这个div只会根据内部内容自适应大小。我尝试在CSS里设置min-height: calc(100vh-var(--height-footer))和min-height: 100%，但都没生效，请问怎么用CSS实现需求？

我的CSS代码 #

:root{
    --color-header: #5B2333;
    --color-background: #F7F4F3;
    --color-padding: #F24333;
    --color-accent: #564D4A;
    --color-accent-two: #BA1B1D;
    --padding-small: 3px;
    --height-footer: 25px;
}

html{
    height: 100%;
}

body{
    margin: 0px;
    padding: 0px;
    background-color: var(--color-background);
    min-height: 100%;
}

h1, h2 {
    color: var(--color-background)
}

header{
    padding: var(--padding-small);
    background-color: var(--color-header);    
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main{
    padding: 0;
    margin: 0;
    display: flex;    
    min-height: calc(100vh-var(--height-footer)); //this doesn't work
    min-height: 100%; // neither does this

    justify-content: space-evenly;
    align-items: center;
}

#left-btn-group,
#right-btn-group{
    flex-basis: 20%;
    justify-content: center;
    align-items: center;
}

#left-btn-group button{
    display: block;
    width: 75%;
}

footer {
    padding: var(--padding-small);
    position: fixed;
    bottom: 0;
    height: var(--height-footer);
    min-height: var(--header-height);
    background-color: var(--color-header);
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

#canvas {
    width: 50vw;
    height: 50vh;
    display: flex;
    flex-wrap: wrap;
    border: 50px solid var(--color-padding);
    border-radius: 50px;
}

#canvas-border {
    width: 99%;
    height: 99%;
}

我的HTML代码 #

<!DOCTYPE html>

<head>
    <title>Sketch-A-Etch</title>
    <script src="javascript.js" defer></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h1>
            Sketch-A-Etch
        </h1>
    </header>
    <div class="main">
        <div id="left-btn-group">
            <!-- 3 buttons for pixel size -->
            <button id="low">Low Resolution</button>
            <button id="medium">Medium Resolution</button>
            <button id="High">High Resolution</button>
            <button id="clear">Clear Canvas</button>
            <input type="color" id="color" value="#ff0000"> Color Picker</button>
            <!-- Buttons to add -->
        </div>
        <div id="canvas"></div>
        <div id="right-btn-group"></div>
    </div>
    <footer>
        <h2>
            Made by [Redacted]
        </h2>
    </footer>
</body>  

要实现.main占据屏幕剩余空间，核心是利用flex垂直布局让浏览器自动分配垂直空间，同时处理fixed footer的遮挡问题，具体修改如下：

关键修改点 #

1. 将body设置为flex垂直容器：让header、main、footer在垂直方向排列，通过flex-grow让main自动填充剩余空间。
2. 给.main添加flex-grow:1：这是让main占据剩余空间的核心属性，无需手动计算高度。
3. 修正calc语法错误：你之前的calc(100vh-var(--height-footer))缺少运算符前后的空格，不过用flex布局后可弃用该属性。
4. 处理footer遮挡问题：因footer是fixed定位，需给.main添加padding-bottom等于footer高度（含内边距），避免内容被footer盖住。
5. 修复footer未定义变量：footer里的--header-height未在:root中定义，直接删除该属性。

修改后的完整CSS代码 #

:root{
    --color-header: #5B2333;
    --color-background: #F7F4F3;
    --color-padding: #F24333;
    --color-accent: #564D4A;
    --color-accent-two: #BA1B1D;
    --padding-small: 3px;
    --height-footer: 25px;
}

html{
    height: 100%;
}

body{
    margin: 0px;
    padding: 0px;
    background-color: var(--color-background);
    /* 修改为flex垂直布局，确保占满视口高度 */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2 {
    color: var(--color-background)
}

header{
    padding: var(--padding-small);
    background-color: var(--color-header);    
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main{
    padding: 0;
    margin: 0;
    display: flex;    
    /* 核心：让main填充剩余空间 */
    flex-grow: 1;
    /* 避免内容被fixed footer遮挡 */
    padding-bottom: calc(var(--height-footer) + var(--padding-small) * 2);

    justify-content: space-evenly;
    align-items: center;
}

#left-btn-group,
#right-btn-group{
    flex-basis: 20%;
    justify-content: center;
    align-items: center;
}

#left-btn-group button{
    display: block;
    width: 75%;
}

footer {
    padding: var(--padding-small);
    position: fixed;
    bottom: 0;
    height: var(--height-footer);
    /* 删除未定义的--header-height变量 */
    background-color: var(--color-header);
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

#canvas {
    width: 50vw;
    height: 50vh;
    display: flex;
    flex-wrap: wrap;
    border: 50px solid var(--color-padding);
    border-radius: 50px;
}

#canvas-border {
    width: 99%;
    height: 99%;
}

效果说明 #

修改后，body作为垂直flex容器，header和footer保持自身高度，.main会自动填充两者之间的所有剩余空间，同时padding-bottom确保.main内的内容不会被fixed定位的footer遮挡。

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