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, но не получается.
  • Вопрос задан
  • 165 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Метод, предложенный SmthTo, хорош, когда все слайды одинаковые.
Если слайды с разным кол-вом высоты и автоподстройкой высоты при смене слайда, он не подойдёт.

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

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

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


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

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

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