如何使div填充绝对底部div的剩余空间

要使一个div填充绝对底部div的剩余空间，可以使用flexbox布局或者grid布局来实现。

使用flexbox布局：

在父容器上设置display为flex，使其成为一个flex容器。
将底部div设置为flex-grow: 1，使其占据剩余空间。
将顶部div设置为flex-shrink: 0，使其不缩小。

示例代码如下：

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

    .top {
        flex-shrink: 0;
        background-color: #f1f1f1;
    }

    .bottom {
        flex-grow: 1;
        background-color: #e1e1e1;
    }
</style>

<div class="container">
    <div class="top">顶部div</div>
    <div class="bottom">底部div</div>
</div>

使用grid布局：

在父容器上设置display为grid，使其成为一个grid容器。
将底部div设置为grid-row: 2，使其占据第二行。
将顶部div设置为grid-row: 1，使其占据第一行。

示例代码如下：

<style>
    .container {
        display: grid;
        grid-template-rows: auto 1fr; /* 第一行自适应内容高度，第二行占据剩余空间 */
        height: 100vh; /* 设置父容器高度为视口高度 */
    }

    .top {
        background-color: #f1f1f1;
    }

    .bottom {
        background-color: #e1e1e1;
    }
</style>

<div class="container">
    <div class="top">顶部div</div>
    <div class="bottom">底部div</div>
</div>

以上是使用flexbox布局和grid布局实现div填充绝对底部div的剩余空间的方法。这两种方法都能够灵活地适应不同的布局需求，并且不依赖于具体的云计算平台或品牌商。

腾讯云相关产品和产品介绍链接地址：

腾讯云弹性伸缩（Auto Scaling）：https://cloud.tencent.com/product/as
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云容器服务（TKE）：https://cloud.tencent.com/product/tke
腾讯云云原生容器服务（Cloud Native Container Service）：https://cloud.tencent.com/product/ccs
腾讯云云数据库 MySQL 版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（Tencent Blockchain as a Service）：https://cloud.tencent.com/product/baas
腾讯云视频处理（VOD）：https://cloud.tencent.com/product/vod
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
腾讯云移动开发（Mobile Development）：https://cloud.tencent.com/product/md
腾讯云云存储网关（Cloud Storage Gateway）：https://cloud.tencent.com/product/csg
腾讯云元宇宙（Metaverse）：https://cloud.tencent.com/product/mv