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

[Anonymous]

У меня есть проблема, у меня есть контейнер, заполненный заголовком, основным и нижним колонтитулом. На первой странице, например, для заголовка пользователей настольных компьютеров должен составлять 12% доступной высоты браузера, а основной должна составлять 88% (без панели инструментов браузера и Windows/Android/IOS/Linux), я должен быть видимым только при прокрутке пользователя.header {
height: 12vh;
}

main {
height: 88vh;
}
< /code>

Но заголовок и основной не должны изменять размер, когда пользователь изменяет размер высоты. < /p>

let root = document.documentElement;

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

Но когда пользователь изменяет высоту браузера и обновит страницу - -deviceheight еще раз.root.style.setProperty("--deviceHeight", window.screen.availHeight)
< /code>

Но затем выход отличается для Chrome, Opera и других браузеров. Заголовок и основная высота не должны меняться. Если нет, возможно ли это в JavaScript / JS + jQuery?
или Mayble, если я использую несколько jQuery (например, итерация на 10 в медиа -запросах) < /p>

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

Я ищу лучшее решение для программирования и SEO, любые советы, даже если они сложны, будет отличным! < /p>

Подробнее здесь: https://stackoverflow.com/questions/612 ... javascript