响应式自举旋转木马可能吗？

Question

我正在尝试制作一个具有标题，引导程序轮播和页脚的首页。到目前为止它看起来像这样：

除了一些定位问题，它看起来很好。当我决定使其响应时，问题就出现了。

通过响应，我的意思是旋转木马的大小根据浏览器的大小进行调整。就像现在一样，高度设置为固定值500px。

如果我决定将高度改为100%，整个旋转木马会消失。我试图找到一种方法来使用网格来解决我的问题，但我找不到一种方法来填充整个首页的网格。

到目前为止，这是旋转木马的一小段css：

.carousel {
    --main-height: 500px;
    height: var(--main-height);
    grid-area: carousel;
}

这是php页面本身的一个片段：

<header id="navbar">
    <nav>
        <?php include "../includes/header.php"?>
    </nav>
</header>

<?php include "../includes/carousel.php"?>

<main>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</main>

<footer>
    <?php include "../includes/footer.php"?>
</footer>

以下是建立网格的主要css：

body{
    background: linear-gradient(rgba(70,0,0,1),rgba(10,0,0,1)) no-repeat center center fixed;
    display:grid;
    grid-template-rows: 60px auto 150px;
    grid-template-columns: minmax(200px, 1fr) 12fr;
    grid-template-areas: "header header"
                         "main main "
                         "footer footer";
    grid-gap: 50px;
}

#frontpagebody{
    grid-template-rows: 60px auto auto 150px;
    grid-template-areas: "header header"
                         "carousel carousel"
                         "main main"
                         "footer footer";
    grid-gap: 0;
}

注意事项：我确实尝试删除main中的整个php以及主css中id特定身体标签中main的提及，这使得页脚触及旋转木马，但最终仍然没有帮助。

有没有办法设置轮播高度，以便填充页眉和页脚之间的间隙，浏览器的大小？或者这是不可能的？