如何使主内容占据固定页眉页脚剩余的浏览器空间？

我正在学习The Odin Project，遇到主内容无法填满浏览器剩余空间的问题，当前效果如下：

主内容只延伸到1px红色实线边框的位置。我试过部分方案，但要么不支持固定的header和footer，要么无效（相关尝试已在代码中注释）。想知道思路是否有误，有没有标准解决方法？

index.html #

<body>
    <div class="header">
        <h1>
            MY AWESOME WEBSITE
        </h1>
    </div>

    <div class="main-content">
        <div class="sidebar">
            <ul>
                <li><a href="#">⭐ - link one</a></li>
                <li><a href="#">🦸🏽‍♂️ - link two</a></li>
                <li><a href="#">🖌️ - link three</a></li>
                <li><a href="#">👌🏽 - link four</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem
                dignissimos
                maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit
                corrupti veritatis minima porro?</div>
            <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam
                maiores
                velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi
                odit
                ea.
            </div>
            <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi
                eligendi
                aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia
                esse
                autem?</div>
            <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius
                amet
                adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum
                minima
                laboriosam eos!</div>
            <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi
                eligendi
                aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia
                esse
                autem?</div>
            <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius
                amet
                adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum
                minima
                laboriosam eos!</div>
        </div>
    </div>

    <div class="footer">
        The Odin Project ❤️
    </div>
</body>
</html>

style-07.css #

:root{
    --header-height: 72px;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    min-height: 100vh;
    height: 100%;
}

.main-content{
    display: flex;
    height: 100%; /* If I use px units it will force the main content to go down but I know that is not ideal. */
    padding-top: var(--header-height); 
    flex-direction: row;
    border: 1px solid red;
    /* Things I have tried from other answers*/
    /* flex: 1 1 auto; */
    /* height: calc(100% - var(--header-height)); */
}

.sidebar{
    flex-shrink: 0;
}

.content {
    padding: 32px;
    display: flex;
    flex-wrap: wrap;
}

.card {
    width: 300px;
    padding: 16px;
    margin: 16px;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: var(--header-height);
    background: darkmagenta;
    color: white;
    padding: 0px 15px;
}

h1 {
    font-weight: 1000;
}

.footer {
    height: var(--header-height);
    background: #eee;
    color: darkmagenta;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar {
    width: 300px;
    background: royalblue;
    box-sizing: border-box;
    padding: 16px;
}

.card {
    border: 1px solid #eee;
    box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
    border-radius: 4px;
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: white;
    font-size: 24px;
}

li{
    margin-bottom: 16px;
}

问题核心是fixed定位的Header/Footer脱离了文档流，你给main-content设置的height:100%基于父元素body的高度，但body同时设置min-height:100vh和height:100%会导致高度传递异常，加上padding-top额外占用空间，最终主内容高度计算错误。

以下是标准调整方案：

1. 统一管理高度变量并重构body布局 #

:root{
    --header-height: 72px;
    --footer-height: 5%; /* 和footer设置的高度统一 */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    min-height: 100vh;
    /* 移除height:100%，改用flex布局让子元素自动分配空间 */
    display: flex;
    flex-direction: column;
    /* 给body加内边距，避开fixed的Header和Footer */
    padding-top: var(--header-height);
    padding-bottom: var(--footer-height);
    box-sizing: border-box; /* 确保内边距不会撑开body */
}

2. 让main-content自动填充剩余空间 #

.main-content{
    display: flex;
    flex: 1; /* 关键：自动占据Header和Footer之间的剩余空间 */
    flex-direction: row;
    border: 1px solid red;
    /* 移除padding-top和height:100% */
}

3. 统一footer的高度定义 #

.footer {
    height: var(--footer-height); /* 用变量代替硬编码，保持统一 */
    background: #eee;
    color: darkmagenta;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

调整后，main-content会自动填充Header和Footer之间的剩余空间，同时fixed元素不会干扰主内容的正常布局。

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