Задать вопрос
Vextor-ltd
@Vextor-ltd
Webdeveloper

Как задать высоту адаптивной секции?

Есть некая секция с position: relative, состоящая из картинок с position: absolute и шириной, заданной в процентах.

Как сделать без медиа-запросов так, чтобы эта родительская секция имела динамическую высоту в зависимости от ширины экрана? Получается, что ей обязательно нужно задавать фиксированную высоту в vw, чтобы остальные секции снизу не наезжали на данную секцию?
  • Вопрос задан
  • 65 просмотров
Подписаться 1 Простой 6 комментариев
Пригласить эксперта
Ответы на вопрос 1
aromilo
@aromilo
Один из способов динамической установки высоты родительского раздела на основе его содержимого - использовать JavaScript для вычисления высоты дочерних элементов, а затем установить высоту родительского раздела соответствующим образом.
Вот пример:

<div class="parent">
  <img class="child" src="image1.jpg">
  <img class="child" src="image2.jpg">
</div>

.parent {
    position: relative;
  }

  .child {
    position: absolute;
    width: 50%;
  }

<script>
  const parent = document.querySelector('.parent');
  const children = document.querySelectorAll('.child');

  let height = 0;
  for (const child of children) {
    height = Math.max(height, child.offsetHeight);
  }

  parent.style.height = height + 'px';
</script>


Этот код использует свойство offsetHeight для расчета высоты каждого дочернего элемента, а затем устанавливает высоту родительского элемента на максимальную высоту всех дочерних элементов.

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

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

Похожие вопросы