Bootstrap 4: установка верхнего и нижнего колонтитула + карты Google с высотой 100%

Question

Я пытаюсь создать веб-страницу, используя Boostrap 4.1, которая содержит заголовок, карту Google, заполняющую 100% контента, и нижний колонтитул под картой.

---------------------------------------------------------------------
|                             Header                                |
---------------------------------------------------------------------
|                             Content                               |
|                              (map)                                |
|                                                                   |
|                                                                   |
|                                                                   |
|                                                                   |
---------------------------------------------------------------------
|                             Footer                                |
---------------------------------------------------------------------

В настоящее время у меня многопроблема с установкой всего на экране.Он продолжает добавлять полосу прокрутки, потому что нижний колонтитул падает со страницы.Есть ли способ разместить карту на экране, чтобы она заполняла пространство между верхним и нижним колонтитулами?

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#map-canvas {
  width: 100%;
  height: 100%;
}

Вот мой текущий прогресс в jsfiddle: https://jsfiddle.net/11n0n6u1/1/

Answer 1

Я завернул весь контент в div, который дал следующие классы: d-flex flex-column justify-content-between fullHeight.
Класс fullHeight делает одну вещь, он дает div height: 100vh;.
Все это создает гибкий div и позволяет карте заполнить все оставшееся пространство между верхним и нижним колонтитулами.

Смотрите здесь для моей обновленной скрипки: https://jsfiddle.net/od5jrfau/

Answer 2

Вот ваш код обновлен

Updated linkhttps://jsfiddle.net/qgah75x2/

Краткое описание: Вы можете установить высоту для верхнего и нижнего колонтитула, а для карты вы можете рассчитать как 100% - heightofheader -heightof footer.

Или вы можете установить высоту верхнего колонтитула, т.е. 5% / 5vh и высоту карты 90% / 90vh