CSS应用递增的高度，但div应停留在底部

<style>
    .container {
        display: flex;
        flex-direction: column;
        height: 100vh; /* 设置父容器的高度为视口高度 */
    }

    .content {
        flex: 1; /* 子容器占据剩余空间 */
    }
</style>

<div class="container">
    <div class="content">
        <!-- 这里放置页面内容 -->
    </div>
    <div class="footer">
        <!-- 这里放置底部内容 -->
    </div>
</div>

<style>
    .container {
        position: relative;
        min-height: 100vh; /* 设置父容器的最小高度为视口高度 */
    }

    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
</style>

<div class="container">
    <div class="content">
        <!-- 这里放置页面内容 -->
    </div>
    <div class="footer">
        <!-- 这里放置底部内容 -->
    </div>
</div>