如何在不使用绝对位置的情况下将页脚推到底部？

<style>
    html, body {
        height: 100%;
        margin: 0;
    }
    .container {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }
    .content {
        flex: 1;
    }
    .footer {
        background-color: #f5f5f5;
        padding: 20px;
    }
</style>

<div class="container">
    <div class="content">
        <!-- 主要内容 -->
    </div>
    <div class="footer">
        <!-- 页脚内容 -->
    </div>
</div>

<style>
    html, body {
        height: 100%;
        margin: 0;
    }
    .container {
        display: grid;
        grid-template-rows: auto 1fr;
        min-height: 100%;
    }
    .content {
        /* 主要内容 */
    }
    .footer {
        background-color: #f5f5f5;
        padding: 20px;
    }
</style>

<div class="container">
    <div class="content">
        <!-- 主要内容 -->
    </div>
</div>
<div class="footer">
    <!-- 页脚内容 -->
</div>