div底部的页脚，不使用绝对位置

<style>
    .container {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .content {
        flex-grow: 1;
    }

    .footer {
        background-color: #f5f5f5;
        padding: 20px;
    }
</style>

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

<style>
    .container {
        display: grid;
        grid-template-rows: auto 1fr auto;
        min-height: 100vh;
    }

    .header {
        background-color: #f5f5f5;
        padding: 20px;
    }

    .content {
        /* 主要内容区域 */
    }

    .footer {
        background-color: #f5f5f5;
        padding: 20px;
    }
</style>

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

<style>
    .container {
        position: relative;
        min-height: 100vh;
    }

    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        background-color: #f5f5f5;
        padding: 20px;
    }
</style>

<div class="container">
    <!-- 页面内容 -->
    <div class="footer">
        <!-- 页脚内容 -->
    </div>
</div>