Я использую Bootstrap и буклет для создания веб-карты и хотел бы, чтобы карта покрывала всю высоту основного контейнера на странице.Пока что у меня есть работа в Firefox, но не в Chrome или Safari.
У меня есть <body> с min-height: 100vh и внутри этого тега <main> с flex: 1 0 auto, так что <main>элемент всегда заполняет пространство между <nav> и <footer>.
В пределах <main> у меня есть <div class="container-fluid h-100">, который, как я ожидаю, будет иметь высоту <main>, а внутри контейнера у меня есть <div id="map" class="h-100"> который, как я ожидаю, будет иметь высоту контейнера.
Это работает, как и ожидалось, в Firefox: контейнер с высотой, содержащий карту , но не в Chrome или Safari: контейнер с высотой0 и нет видимой карты .
Я видел, что большинство проблем, связанных с высотой на основе%, связано с отсутствием высоты у родительских элементов, но здесь это не так, как даже в Chrome <main>высота элемента: <main> с высотой .
Связано ли это со свойством flex, установленным для тега <main>, и его высота оценивается по-разному в разных браузерах?
Вот полный скелет HTML япеть:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body class="bg-dark">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/"></a>
<button class="navbar-toggler navbar-dark border-0" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="nav-content">
<ul class="navbar-nav align-items-center">
<li class="nav-item ">
</li>
<li class="nav-item ">
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
<li class="nav-item ">
</li>
</ul>
</div>
</nav>
<main>
<div class="container-fluid h-100">
<div id="map" class="h-100"></div>
</div>
</main>
<footer>
</footer>
</body>
</html>
И соответствующий CSS:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1 0 auto;
}
Любая помощь будет принята с благодарностью.