如何使div行填充可用高度

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

    .content {
        flex: 1; /* 子元素填充可用高度 */
    }
</style>

<div class="container">
    <div class="header">Header</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>

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

    .content {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
</style>

<div class="container">
    <div class="header">Header</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>

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

    .header,
    .footer {
        height: 50px; /* 设置头部和底部的高度 */
    }

    .content {
        height: calc(100vh - 100px); /* 子元素填充可用高度 */
    }
</style>

<div class="container">
    <div class="header">Header</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>