Листовка Vue2 заставляет карту иметь 100% высоту родительского контейнера

Question

Как заставить карту Vue2-листовки иметь высоту родительского контейнера на 100%?

Когда я устанавливаю стиль в style="height: 100%", она перезаписывает всю страницу при первом взаимодействии с картой, и слой листов не отображается. т показал вообще.

Answer 1

Используйте calc(100% - 100px) для #map-wrapper, поскольку #some-div имеет высоту 100px в вашем примере. Тогда полоса прокрутки исчезнет.

#some-div {
  height: 100px;
}

#map-wrapper {
  background-color: red;
  height: calc(100% - 100px);
  margin: 0;
}

Fiddle: https://jsfiddle.net/yLe9n1uk/

Или используйте flexbox для родительского div (#app):

#app {
  display: flex;
  flex-direction: column;
}

#some-div {
  height: 100px;
}

#map-wrapper {
  background-color: red;
  height: 100%;
  margin: 0;
}

Скрипка: https://jsfiddle.net/xo5z8r7q/