Заполните максимальную высоту в css / bootstrap - PullRequest
Новая
       7

Заполните максимальную высоту в css / bootstrap

0 голосов
/ 06 ноября 2018

как мне добиться, чтобы карта использовала всю высоту? 

<body class="d-flex flex-column">
<header class="flex-grow-0 flex-shrink-0">
header
</header>
<main class="flex-grow-1 flex-shrink-1">
main
  <div class="map-container row-content">
    <div id="map"></div>
  </div>
</main>
<footer>footer</footer>
</body>

CSS: 

html,
body {
  height: 100%;
}

main {
  height: 100%;
  background-color: deepskyblue;
}

.map-container {
}

#map {
  height: 100%;
  background-color: lightsalmon;
}

Когда я добавлю высоту 100% к карте-контейнеру, высота будет слишком высокой, и будет видна полоса прокрутки. Мой нижний колонтитул имеет переменную высоту, поэтому я не могу использовать calc.

Спасибо

https://jsfiddle.net/ms582u96/

1 Ответ

0 голосов
/ 06 ноября 2018

Вы можете достичь этого, добавив в CSS 

main {
  height: 100%;
  background-color: deepskyblue;
  position: relative;
}

.map-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
...