Динамически вычитать высоту header

Question

У меня есть слайдер, высота которого должна быть равна 100vh - header.height. Но мой хедер меняет свою высоту на мобилке. сейчас у меня это реализовано так, но хотелось бы менять высоту динамически(без привязки к котнкретным значениям); Но мой код не работает ожидаемым образом.

slide {
        width: 100%;

        height: calc(90vh - 149px);

        @media(max-width: 991px) {
            height: calc(90vh - 96px);
        }
    }

window.addEventListener(`resize`, event => {
        let headerHeight = $('.header').outerHeight(); //Высота хедера
        let windowHeight = $('.project-slider__slide').height(); //Высота слайдера
        let final = windowHeight - headerHeight;
        console.log(final)

        $('.project-slider__slide').height(final);
    }, false);

Answer 1

:root {
    --header-height: 100px;
}
.slide {
    height: calc(100vh - var(--header-height));
}

window.addEventListener(`resize`, event => {
    let headerHeight = $('.header').outerHeight(); //Высота хедера
    document.querySelector(':root').style.setProperty('--header-height', headerHeight + 'px');
}, false);

БЛОГ НА HUSL

Динамически вычитать высоту header

Ответы (1 шт):