Get body height where body height is less than viewport height

Question

If body is smaller than viewport, then the viewport size is returned .

What I am trying to do is resize a picture so that the body fits inside the viewport. I want to have one of those nice "above the fold" layouts where the user does not need to scroll. It breaks though when the screen is so large that the body is smaller than the viewport.

If body < viewport

then

document.body.scrollHeight (body) = document.documentElement.clientHeight (viewport)

The jQuery solution is to use $(document).height() , but it gives the larger of the viewport or the document.

How to get the height of the entire document with JavaScript offers solutions that fail here for the same reason.

How do I find the body height where the body height is less than the viewport height?

Answer 1

To prevent this trouble, you can use CSS Viewport variables to define your body height equal to the viewport! See above:

body {
    height: 100vh;
}

In this case i am using the vh variable, that corresponds to the V iewport H eight. Check the other options of viewport variables that your can use.