Как получить холст карты листовки, чтобы иметь высоту 100%?

Question

Моей листовка холст в настоящее время выглядит следующим образом, с 700px высоты:

Map with 700px height

Однако я хотел бы его высоту он будет 100%, для того, чтобы взять на себя все белое пространство.

высота: 100% не работает в свойствах CSS холста карты. Я нашел несколько решений, но они хороши только для Карт Google.

Есть ли у кого-нибудь решение, даже если это только обходной путь? Спасибо!

Answer 1

Использование height: 100% делает работу, нужно только родительские контейнеры имеют размер тоже (working demo):

html, body { 
    height: 100%; 
} 
#map { 
    width: 100%; 
    height: 100%; 
} 

Answer 2

Лучший способ заключается в использовании единиц измерения длины CSS vh и vw. Они позволяют блоку HTML на уровне блока иметь размерность относительно размера viewport, а не размер его родительского элемента (как %).

.: например

#map { 
    width: 100vw; 
    height: 100vh; 
} 

Для справки: https://developer.mozilla.org/en-US/docs/Web/CSS/length