How to stretch google map to full block height?

Question

css

It is necessary that the map stretches to the full height of the block. The problem is that the parent doesn't have a well-defined height because it stretches based on the content. So height: 100% won't work.
But still, maybe there is some solution?

Answer 1

If I were you, I would include jQuery and do the following. Let's say we have <div id="mapBox"> its own height, which, as I understand it, changes depending on the size of the monitor and we have a div in which the map is wrapped <div id="map">, then we write only two lines in JQuery and everything will work

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

Answer 2

if you do not want to put the map on absolute positioning, then only JS (Jquery) will help, for example, as in the first answer

Answer 3

If you copied from Google maps, remove the height and width attributes from the html tag.

<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>