1

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 работает).

2

1 ответ 1

2

Пример с использованием 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>

2
  • а стоп, к сожалению работает не так, при изменении размера экрана экрана блоки ведут себя не так как надо.
    – Karalahti
    24 фев 2017 в 6:46
  • спс, так подойдет (flex к сожалению не подходит )
    – Karalahti
    24 фев 2017 в 6:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.