html - 响应式引导轮播可能吗？

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

注意事项:我确实尝试删除 php 中的整个 main 以及在 id 特定正文标记中提到的 main主要的 css，它使页脚接触到轮播，但最终仍然无济于事。

有没有一种方法可以设置轮播高度，使其填充页眉和页脚之间的空隙，无论浏览器的尺寸如何？或者这是不可能的？

Answer 1

答案是将所有内容设置为 vh。

1vh = 1% 浏览器高度。所以我要做的就是这个。

1. 固定页眉和页脚的位置。
2. 记下页眉和页脚的高度。
3. 将轮播的高度设置为 100vh - (header height + footer
高度)。

由于页面上仅有的三个元素是页眉、页脚和轮播，最后一次计算意味着整个页面都已填满，因为整个 100vh 已用完。无论我如何调整浏览器的大小，它都能很好地适应。