var myMap; ymaps.ready(init); function init() { myMap = new ymaps.Map('map', { center: [55.76, 37.64], zoom: 10, controls: ['zoomControl', 'typeSelector', 'fullscreenControl'] }); myMap.behaviors.disable('scrollZoom'); } 
 .col { float: left; min-height: 300px; width: 50%; } .cl { *zoom: 1 } .cl:before, .cl:after { display: table; content: ""; line-height: 0 } .cl:after { clear: both } .left { float: left } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> <div class="container cl"> <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dignissimos excepturi ipsa nisi. Accusantium necessitatibus quisquam deserunt et, fugit laboriosam nobis libero, eius inventore totam quod dolores sapiente provident facilis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dignissimos excepturi ipsa nisi. Accusantium necessitatibus quisquam deserunt et, fugit laboriosam nobis libero, eius inventore totam quod dolores sapiente provident facilis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dignissimos excepturi ipsa nisi. Accusantium necessitatibus quisquam deserunt et, fugit laboriosam nobis libero, eius inventore totam quod dolores sapiente provident facilis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dignissimos excepturi ipsa nisi. Accusantium necessitatibus quisquam deserunt et, fugit laboriosam nobis libero, eius inventore totam quod dolores sapiente provident facilis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dignissimos excepturi ipsa nisi. Accusantium necessitatibus quisquam deserunt et, fugit laboriosam nobis libero, eius inventore totam quod dolores sapiente provident facilis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dignissimos excepturi ipsa nisi. Accusantium necessitatibus quisquam deserunt et, fugit laboriosam nobis libero, eius inventore totam quod dolores sapiente provident facilis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dignissimos excepturi ipsa nisi. Accusantium necessitatibus quisquam deserunt et, fugit laboriosam nobis libero, eius inventore totam quod dolores sapiente provident facilis?</div> <div id="map" class="col"></div> </div>

how to stretch the map along the height of the left block through css but not using the height through vh (since vh does not work everywhere).

1 answer 1

An example using display: table (browser support for IE8, inclusive) This effect can also be achieved using display: flex

 var myMap; ymaps.ready(init); function init() { myMap = new ymaps.Map('map', { center: [55.76, 37.64], zoom: 10, controls: ['zoomControl', 'typeSelector', 'fullscreenControl'] }); myMap.behaviors.disable('scrollZoom'); } 
 .cl { display: table; width: 100%; } .col { display: table-cell; vertical-align: top; min-height: 300px; width: 50%; position: relative; } #map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> <div class="container cl"> <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dignissimos excepturi ipsa nisi. Accusantium necessitatibus quisquam deserunt et, fugit laboriosam nobis libero, eius inventore totam quod dolores sapiente provident facilis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dignissimos excepturi ipsa nisi. Accusantium necessitatibus quisquam deserunt et, fugit laboriosam nobis libero, eius inventore totam quod dolores sapiente provident facilis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dignissimos excepturi ipsa nisi. Accusantium necessitatibus quisquam deserunt et, fugit laboriosam nobis libero, eius inventore totam quod dolores sapiente provident facilis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dignissimos excepturi ipsa nisi. Accusantium necessitatibus quisquam deserunt et, fugit laboriosam nobis libero, eius inventore totam quod dolores sapiente provident facilis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dignissimos excepturi ipsa nisi. Accusantium necessitatibus quisquam deserunt et, fugit laboriosam nobis libero, eius inventore totam quod dolores sapiente provident facilis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dignissimos excepturi ipsa nisi. Accusantium necessitatibus quisquam deserunt et, fugit laboriosam nobis libero, eius inventore totam quod dolores sapiente provident facilis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dignissimos excepturi ipsa nisi. Accusantium necessitatibus quisquam deserunt et, fugit laboriosam nobis libero, eius inventore totam quod dolores sapente provident facilis?</div> <div class="col"> <div id="map"></div> </div> </div>

  • and the stop, unfortunately, does not work this way; when the screen size of the screen changes, the blocks behave not as they should. - Karalahti
  • ATP, this will do (flex unfortunately does not fit) - Karalahti