0

Подскажите, кто сталкивался. Нужно видео с youtube вместить в определенные рамки. Но для того, чтобы вписать видео в этот блок, вынужден был поставить padding-bottom: 36%. И теперь нет возможности нижний блок (в голубой рамке на скрине) прижать к нижней границе блока, который над ним. Проблема с padding-bottom

Если уменьшать padding-bottom, блок приближается к своему месту, но высота видео уменьшается. Вот часть css.

.calendar__general-slyde-video {
position: relative;
padding-bottom: 36%;
height: 0;
overflow: hidden;
width: 315px;
}
.calendar__general-slyde-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60%;
}

Буду благодарен, кто подскажет как быть!

4
  • А почему нельзя просто все завернуть в один див и отталкиваться от этого блока с календарем?
    – Luric
    17 мар 2019 в 15:44
  • Напиши конкретнее, весь код, твоих слов недостаточно, надо видеть: 17 мар 2019 в 22:19
  • prntscr.com/mz7vti 17 мар 2019 в 22:19
  • необходимо использовать margin-bottom
    – soledar10
    18 мар 2019 в 10:54

1 ответ 1

0

.calendar__general-slyde-video iframe у вас имеет высоту, заданную в %. Если у этого элемента не существует контейнеров (парент элементов), имеющих явно заданную высоту, то % в конечном итоге может оказаться равным чему угодно. Так и получается - паддинг в 36% приводит к увеличению общей высоты парент-контейнера, от которой пляшет и высота видео.

2
  • Подскажите пож-ста, как мне тогда быть в моем случае? Задать конкретную высоту в px? Попробовал, не помогло.
    – kan
    19 мар 2019 в 20:03
  • задайте конкретную высоту контейнеру 25 мар 2019 в 11:24

Ваш ответ

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

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