如何使div行填充可用高度

要使div元素填充可用高度，可以使用以下方法：

使用CSS Flexbox布局：将父容器的display属性设置为flex，然后将子元素的flex属性设置为1。这样子元素将会自动填充父容器的可用高度。示例代码如下：

<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>

使用绝对定位：将父容器的position属性设置为relative，然后将子元素的position属性设置为absolute，并设置top、bottom、left、right属性为0。这样子元素将会相对于父容器进行定位并填充可用高度。示例代码如下：

<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>

使用calc()函数：通过calc()函数计算子元素的高度，将父容器的高度减去其他元素的高度，然后将该值设置为子元素的高度。示例代码如下：

<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>

以上是三种常用的方法来使div元素填充可用高度。根据具体的需求和布局，选择适合的方法即可。