Как указать фиксировано-адаптивную высоту блока?

Question

[halfhope]

Здравствуйте!

Сайт https://bit.ly/2Qyl3Il Есть слайдер на главной странице сайта. До инициализации JS они имеет размер 0px, после инициализации идет перерасчет размеров и перерисовка страницы. Задача - избежать перерасчета размеров и перерисовок. Т.е. если я указываю блоку слайдера фиксированную высоту:

<div id="mmr-owl" class="owl-carousel" style="height:<?php echo $height ?>px;">

то задача решается частично. Перерасчета нет, перерисовки нет. Но шаблон адаптивный и на мобильных высота остается прежней (наблюдается отступ снизу). Можно ли средствами CSS задать фиксировано-адаптивную высоту блока? Пробовал minmax, calc, vw, но не получается.

Answer 1

[Сергей delphinpro]

Метод, предложенный SmthTo, хорош, когда все слайды одинаковые.
Если слайды с разным кол-вом высоты и автоподстройкой высоты при смене слайда, он не подойдёт.

Добавлю еще один, который использую я.

Он примитивен: просто прописываем высоту обертке для не инициализированного слайдера:

.myslider:not(.owl-loaded) {
  height: 300px;
  overflow-y: scroll;
}

Разщумеется, таким образом не получиться точно указать нужную высоту (или придется сильно заморочиться), но этого в общем-то и не нужно. Когда высота меняется всего на несколько пикселей после инициализации, это практически не заметно.

Comments

[Rustam Bainazarov]

Сергей delphinpro, согласен. Хотя, если знать соотношение сторон самого высокого слайда, можно по нему ориентироваться, а сами слайды центрировать по вертикали: если слайд меньше обертки, то сверху и снизу будут одинакового размера отступы.

Но, блин, это залупа всё равно :))

В любом случае, разные по габаритам баннеры — зло.

P. S. А ещё зло — такое соотношение сторон для баннеров на мобильных (как в примере автора вопроса).