Один из способов динамической установки высоты родительского раздела на основе его содержимого - использовать 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 для расчета высоты каждого дочернего элемента, а затем устанавливает высоту родительского элемента на максимальную высоту всех дочерних элементов.
Обратите внимание, что этот код предполагает, что дочерние элементы имеют одинаковую высоту, поэтому вам может понадобиться изменить его, если ваши дочерние элементы имеют разную высоту.
Простой
