2

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?

Community
  • 1
  • 1
Iktys
  • 840
  • 1
  • 8
  • 17
  • Not quite because the solutions there will not give a height smaller than the viewport. – Iktys Oct 23 '15 at 11:49
  • This one of those points where I would simply use a container and try to check that. The `body` is a bit special, with special features. Why not wrap the whole thing in a container and measure that? – somethinghere Oct 23 '15 at 11:57
  • Shooting in the dark here, but have you tried `$('body').outerHeight()`? – robabby Oct 23 '15 at 20:03

1 Answers1

0

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 Viewport Height. Check the other options of viewport variables that your can use.

Marvin Medeiros
  • 202
  • 4
  • 22