как изменить высоту карты буклета

В моем приложении я делал div карты как

<div id="map" style="height: 610px; width:100%"></div>

но чтобы сделать мою карту отзывчивой, я хочу сделать высоту также на 100%, если я делаю height: 100% тогда она не работает.

Как я могу сделать высоту также переменной шириной, чтобы можно было правильно отображать карту на любом устройстве.

Демо: http://jsfiddle.net/CcYp6/

Если вы измените высоту и ширину карты, вы не получите карту.

Ответ 1

Вам нужно установить родительские элементы на height: 100%; первый

html, body {
   height: 100%;
}

демонстрация

~~Демо~~ (это не будет работать, поскольку высота родителя не определена)

Объяснение: Зачем вам это нужно? Поэтому, когда вы указываете высоту элемента в % тогда возникает 1-й вопрос: 100% чего? По умолчанию div имеет высоту 0px, поэтому 100% для div просто не работают, но устанавливают height родительских элементов на 100%; будет работать.

Ответ 2

Вы должны установить размер div с помощью JavaScript.

$("#map").height($(window).height()).width($(window).width());
map.invalidateSize();

Вы можете найти полный пример здесь.

Ответ 3

Использование height = "100vh" работает в новом браузере. но это нормально.