Я пытаюсь создать главную страницу с заголовком, загрузочной каруселью и нижним колонтитулом. Пока это выглядит так:
Помимо некоторых проблем с позиционированием, все выглядит хорошо. Проблема возникает, когда я решаю сделать ее отзывчивой.
Под отзывчивостью я подразумеваю, что размер карусели регулируется в соответствии с размером браузера. Как и сейчас, высота установлена на фиксированное значение, 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 вместе с упоминаниями main в теге id для конкретного тела в главном CSS, что заставило нижний колонтитул коснуться карусели, но это все же не помогло в конце.
Есть ли способ установить высоту карусели, чтобы она заполняла промежуток между верхним и нижним колонтитулом, какой бы размер не имел браузер? Или это просто невозможно?