Как растянуть google-карту на всю высоту блока?

Question

[smash_wp]

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

Но всё же, может быть есть какое-то решение?

Answer 1

[Serdji]

Я бы на вашем месте подключил JQuery и сделал следующие. Допустим у нас есть<div id="mapBox"> у него своя высота, которая меняется как я понимаю от размеров монитора и у нас есть див в который обвернута карта <div id="map">, тогда в JQuery пишем всего две строчки и все будет работать

var mapHeight = $( '#mapBox' ).height();
$( '#map' ).css('height', mapHeight);

Comments

[smash_wp]

Хорошая идея, но вот постоянно говорят "крутые" разработчики, а вдруг JavaScript отключен?

Хотелось бы узнать, насколько часто этот JavaScript отключают?)

[Serdji]

Я думаю что в наше время, это очень большая редкость что у кого то в браузере JavaScript отключен. Сейчас большая часть всех проектов на нем работает. Так что я бы не переживал за это на вашем месте. А если даже у кого то он и отключен, можно создать предупреждение "У вас отключен JavaScript, и сайт будет работать не корректно". Но я бы даже это не стал делать, так как я писал выше, сейчас у всех браузеров он включен.

[smash_wp]

Спасибо за подсказку)

Answer 2

[Георгий Кузнецов]

Если из гугл карт копировал, убери в html из тега атрибуты height и width.

<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2003.9220045591112!2d37.41079786002719!3d55.68331233629306!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54e0d45323bd5%3A0xda6c23026165b2da!2z0JfQsNGA0LXRh9GM0LUsINCc0L7RgdC60L7QstGB0LrQsNGPINC-0LHQuy4!5e0!3m2!1sru!2sru!4v1594646576788!5m2!1sru!2sru" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

Answer 3

[Александр Зачиналов]

если вы не хотите сажать карту на абсолютное позиционирование, то поможет только JS (Jquery), например как в первом ответе