Get max available browser height without browser toolbar- javascript

Question

I have a problem, I have container populated with header, main and footer. On the front page for example for desktop users header should be 12% of available browser height and main should be 88%(without the browser toolbar and windows/android/ios/linux bars), footer should be only visible when user scroll the page.

I considered these solutions:

header {
    height: 12vh;
}

main { 
    height: 88vh;
}

but header and main shouldn't resize when user resize browser height.

let root = document.documentElement;

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

but when user change browser height and refresh the page - --deviceHeight is calculated once more.

I tried also:

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

but then output is different for chrome, opera and other browsers.

To conclude - I want to get max available height without windows and browser bars and resize header and main to that height, so then header height + main height would be 100% of max available browser (inner?) height, but when user resize browser on desktop -> header and main height shouldn't change.

Is this possible in css without multiple media queries? If not, is this possible in javascript / js + jquery? Or mayble should I use multiple jquery (for example iteration by 10 in media queries)

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

I'm looking for best solution for front end programming and SEO, any advise, even if complicated, will be great!

Answer 1

You said that the header's size shouldn't change when browser's height is changing , so you can use a fixed unit and calculate the rest for your mainf content :

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

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

Answer 2

I found a solution, not necessary what i wanted, but it is closest to what i desired.

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);
    }
}