halfhope
@halfhope

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

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

Сайт https://bit.ly/2Qyl3Il Есть слайдер на главной странице сайта. До инициализации JS они имеет размер 0px, после инициализации идет перерасчет размеров и перерисовка страницы. Задача - избежать перерасчета размеров и перерисовок. Т.е. если я указываю блоку слайдера фиксированную высоту:
<div id="mmr-owl" class="owl-carousel" style="height:<?php echo $height ?>px;">

то задача решается частично. Перерасчета нет, перерисовки нет. Но шаблон адаптивный и на мобильных высота остается прежней (наблюдается отступ снизу). Можно ли средствами CSS задать фиксировано-адаптивную высоту блока? Пробовал minmax, calc, vw, но не получается.
  • Вопрос задан
  • 113 просмотров
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro
frontend developer
Метод, предложенный SmthTo, хорош, когда все слайды одинаковые.
Если слайды с разным кол-вом высоты и автоподстройкой высоты при смене слайда, он не подойдёт.

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

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

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


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы