Для установки высоты контейнера в зависимости от его содержимого можно использовать свойство "height: fit-content;" или "height: auto;". Однако, эти свойства не работают с элементами, которые имеют позиционирование "absolute" или "fixed".
Чтобы исправить ситуацию, когда высота основного контейнера не подстраивается под элементы с позиционированием "absolute" или "fixed", можно использовать различные методы:
1. Установить явно заданную высоту для основного контейнера, учитывая высоту элементов с позиционированием "absolute". Например, можно установить высоту в пикселях или процентах, исходя из ожидаемого размера этих элементов.
2. Использовать JavaScript, чтобы динамически рассчитывать высоту основного контейнера, исключая элементы с позиционированием "absolute". Например, можно получить все элементы внутри основного контейнера и вычислить сумму их высот с помощью метода getBoundingClientRect(), затем установить эту высоту для контейнера.
Пример использования JavaScript для расчета высоты контейнера без учета элементов с позиционированием "absolute":
```javascript
const container = document.querySelector('.main-container');
const elements = container.querySelectorAll('*');
let containerHeight = 0;
elements.forEach((element) => {
const style = getComputedStyle(element);
if (style.position !== 'absolute' && style.position !== 'fixed') {
const elementHeight = element.getBoundingClientRect().height;
containerHeight += elementHeight;
}
});
container.style.height = `${containerHeight}px`;
```
Обратите внимание, что этот код предполагает, что все элементы, которые должны влиять на высоту контейнера, находятся внутри класса ".main-container". Вы можете изменить селектор в соответствии с вашей разметкой.