A cool effect I've been seeing on sites lately involves the use of percentage based heights & absolute positioning. Puzzled by how it worked, I set out to break the code down and do it myself.
Some great examples are the Dropbox (https://www.dropbox.com) and Spotify (https://www.spotify.com/us/) home pages. Using this effect, the top section of the page adapts to your entire screen resolution (100% height). It also includes some content that always sits at the very bottom of the initial viewport. Now, when you begin to scroll, the rest of the page content appears *just* after the bottom of the page viewport.
<div class="top-section">
<p>This content takes up 100% of the viewport at the top</p>
<a href="#" class="more">Learn More</a>
</div>
<div class="bottom-section">
<p>This is the body content, and should appear just after the top section <strong>only when you scroll down</strong>.</p>
</div>.top-section{
height: 100vh;
}And our result:
Here's a live demo on my site to make resizing the browser window a little easier.
It works!
Now the top section of content will always take up 100% of the viewport and adapt to changes in screen size. A good thing to do also is set a min-height to your top content so layout isn't broken on short screen sizes.