How to calculate the screen height and position an element below the fold?

Question

I have a main wrapper with a background image and the background image should extend to cover all of these elements. My HTML looks like this:

<div id="main-wrapper">
    <div id="header"></div>
    <div id="scroll-down-arrow"></div>
    <div class="additional-content"></div>
</div>

I would like the calculate the height of the screen size and position "scroll-down-arrow" at the bottom of the screen and then position "additional-content" below the fold (not viewable area of the screen).

I have read the positioning tutorial here on W3 School: https://www.w3schools.com/Css/css_positioning.asp but still can't figure out the best way to accomplish this and position the content below the fold while maintaining the background image size of the main-wrapper.

Here's how my mock-up looks like, let's say the blue border is the viewable area on the screen, then the elements should be arranged like this:

Preferably I would like this to be pure CSS but I am also open to do the screen height calculation with JS as long as it's mobile responsive. Can you share a Pen or sample code if you have done something similar to this?

Answer 1

Your viewport height is window.innerHeight, so anything placed beyond that will be off-screen below, and anything placed before that (such that element.top + element.height < 0) will be off-screen above.

(To help with that, you can always get "the actual position of an element on the page, right now", probably element.getBoundingClientRect())

However, note that "the fold" is kind of a terrible notion given the huge range of possible browser sizes, not just desktop vs. mobile but also within desktop and mobile classes.

Instead of trying to figure out where the fold is, just make sure your main content is CSS'd in such a way that most of it's immediately visible at various media size breakpoints instead of trying to position things based on viewport/element coordinates after the fact.

And remember that the CSS vw and vh units exist specifically for this purpose.