Получить максимальную доступную высоту браузера без панели инструментов браузера- javascript

Question

У меня проблема, у меня есть контейнер с заголовком, главным и нижним колонтитулами. Например, на главной странице для пользователей настольных компьютеров заголовок должен составлять 12% от доступной высоты браузера, а основной - 88% (без панели инструментов браузера и окон / android / ios / linux), нижний колонтитул должен быть виден только при прокрутке пользователя. страницы.

Я рассмотрел следующие решения:

header {
    height: 12vh;
}

main { 
    height: 88vh;
}

, но заголовок и main не должны изменяться при изменении размера браузера пользователем.

let root = document.documentElement;

root.style.setProperty("--deviceHeight",
    window.screen.availHeight - (window.outerHeight - window.innerHeight) + "px");

, но при изменении пользователя высота браузера и refre sh страница - --deviceHeight вычисляется еще раз.

Я пробовал также:

root.style.setProperty("--deviceHeight", window.screen.availHeight)

, но тогда вывод отличается для chrome, оперы и других браузеры.

В заключение - я хочу получить максимальную доступную высоту без windows и панелей браузера и изменить размеры заголовка и основного до этой высоты, чтобы высота заголовка + основная высота составляла 100% от максимального доступного браузера ( внутренняя?) высота, но когда пользователь изменяет размер браузера на рабочем столе -> заголовок и основная высота не должны изменяться.

Возможно ли это в css без множественных медиазапросов? Если нет, возможно ли это в javascript / js + jquery? Или, может быть, я должен использовать несколько jquery (например, итерация по 10 в медиа-запросах)

:root {
    --deviceHeight: 299px
}
@media only screen and (min-width 300px) {
    :root {
      --deviceHeight = 300px
    }
}
@media only screen and (min-width: 301px) {
    :root {
        --deviceHeight = 302px;
    }
}
etc.

Я ищу лучшее решение для программирования на стороне клиента и SEO, любой совет, даже если сложный, будет будь великим!

Answer 1

Я нашел решение, не обязательно то, что я хотел, но оно ближе всего к тому, что я хотел.

header {
    height: 160px;
}

@media only screen and (max-height: 599px) {
    main {
        height: calc(599px - 160px);
    }
}

@media only screen and (min-height: 600px) {
    main {
        height: calc(100vh - 160px);
    }
}

Answer 2

Вы сказали, что размер заголовка не должен изменяться при изменении высоты браузера, поэтому вы можете использовать фиксированную единицу и рассчитать остаток для основного содержимого:

header {
    height: 300px; // for exemple
}

main { 
    height: calc( 100vh - 300px ); // calculate the available space
}