Как сделать блоки одинаковой высоты?

288

10 декабря 2016, 10:33

Собственно есть 2 блока, один с меню, другой со слайдером. Слайдер адаптивный, его высота меняется в зависимости от ширины. Использую сетку бутстрап, меню занимает 3 колонки, слайдер 9. Ниже скрин и разметка.

<div class="slidernav">
<div class="container">
<div class="row">
<div class="col-md-3 pdr0">
<div class="nav">
<ul>
    <li><a href="">Авто аккумуляторы</a></li>
    <li><a href="">Автолампы и ходовые огни</a></li>
    <li><a href="">Автомасла</a></li>
    <li><a href="">Автохимия и спецжидкости</a></li>
    <li><a href="">Аксессуары и принадлежности</a></li>
    <li><a href="">Запчасти для иномарок</a></li>
    <li><a href="">Запчасти на отечественные</a></li>
    <li><a href="">Инструменты</a></li>
    <li><a href="">Свечи</a></li>
    <li><a href="">Туризм и отдых</a></li>
    <li><a href="">Устройства зарядные, пусковые</a></li>
    <li><a href="">Фаркопы</a></li>
    <li><a href="">Фильтры</a></li>
    <li><a href="">Шины и диски</a></li>
</ul>
</div>
</div>
<div class="col-md-9 pdl0 pdr0">
<div class="slider">
<ul class="rslides">
  <li><img src="img/1.jpg" alt="">
    <div class="descslide">
<h1>Запчасти
для всех автомобилей</h1>
<span>Полный каталог от а до я</span>
    </div>
  </li>
  <li><img src="img/2.jpg" alt=""></li>
  <li><img src="img/3.jpg" alt=""></li>
</ul>
<a href="/" class="btn">Смотреть каталог <i class="fa fa-bars" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>

Answer 1

Попробуй так, JS:

//При загрузке
$(document).ready(function() {
  var cw = $('#someSlider').height();
  $('#someMenu').css({
    'min-height': cw + 'px'
  });
});

Если хочешь чтобы автоматически подбиралась высота при изменении размеров окна браузера:

//При изменении размера окна браузера
$(window).resize(function() {
  var cw = $('#someSlider').height();
  $('#someMenu').css({
    'min-height': cw + 'px'
  });
});