Растянуть яндекс карту по высоте блока

382
26 февраля 2017, 09:23

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>

как растянуть карту по высоте левого блока через css но не используя высоты через vh(так как не везде vh работает).

Answer 1

Пример с использованием display: table (поддержка браузерами по IE8 включительно) Также данного эффекта можно добиться используя 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>

READ ALSO
Как найти соседний селектор в css?

Как найти соседний селектор в css?

Я знаю, что при коде видаclass1 +

385
Написать код C++ на Python

Написать код C++ на Python

Привет всем,имеется библиотека наDLL и хочу его использовать на Python

349
Использование умных указателей

Использование умных указателей

У меня в коде часто повторяется фрагмент:

330
MessageBox попадает в бесконечный цикл WinApi

MessageBox попадает в бесконечный цикл WinApi

Пишу простейший калькулятор с помощью WinApi, когда происходит деление на 0 нужно вывести MessageBox с ошибкойНо в калькуляторе есть функция auto-reresh,...

468