seo Question posted in
Some basic information to get you started with this can be found here.

Get max available browser height without browser toolbar- javascript – SEO

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!

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    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
}
    Login or Signup to reply.
  3. 0

    Depending to the topic I wanted also point out this:

    get full height without toolbar:
    window.outerHeight
    which results in:
    window.outerWidth and window.outerHeight

    Check out dmitripavlutin for a nice graphical illustration of the window attributes

    Depending on your needs you can adapt to window inner sizes, outer sizes, screen available sizes and so on.

    Browser compability regarding to mozilla docs:
    enter image description here

    I wanted to mention this here, because sometimes I feel like a complete noob and would be happy to find this input at first glance instead of wasting time creating complex mathematical solutions calculating these things^^

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search