Html 是否可能实现响应式引导转盘？

我正在尝试制作一个有页眉、引导转盘和页脚的frontpage。目前看来是这样的：

除了一些定位问题，它看起来还不错。当我决定让它响应时，问题就出现了

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

500px

如果我决定将高度更改为

100%

，整个旋转木马将消失。我曾试图找到一种使用网格解决问题的方法，但我找不到一种让网格填满整个frontpage的方法

到目前为止，这是来自旋转木马的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>

注意事项：我确实尝试删除了

php

中的整个

main

，以及主css中id特定的body标记中提到的

main

，这使得页脚接触到了旋转木马，但最终还是没有帮助

---

是否有一种方法可以设置旋转木马的高度，以便填充页眉和页脚之间的间隙，无论浏览器的大小如何？或者这是不可能的？

答案是将一切都设置为

vh

浏览器高度的

1vh

=

1%

。所以我要做的就是这样

固定页眉和页脚的位置

注意页眉和页脚的高度

将转盘高度设置为

100vh-（页眉高度+页脚
高度）

由于页面上仅有的三个元素是页眉、页脚和旋转木马，最后的计算意味着整个页面已填充，因为整个

100vh

已用完。无论我如何调整浏览器的大小，它都很适合

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