Links open in the same window

Using 100% Height in CSS

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 (http://www.dropbox.com) and Spotify (http://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. Sounds really complicated, right? Actually, the opposite. Let's write some code.

<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>

Your first instincts are to make a div, and throw 100% height on it. Lets try that.

p{
  text-align:center;
}
.top-section{
  height:100%;
}
.more{
  display:block;
  position:absolute;
  bottom:20px;
  text-align:center;
}

See the Pen Using 100% Height by Matt Boldt (@mattboldt) on CodePen



All this makes sense, but we're still not getting that effect we want. The more link is in the right place, but the body content is still visible in the top section. Why isn't height:100% doing the trick?

Well, after scratching my head a bit, I realized how to get it working. Add this little bit:

html, body{
  height:100%;
}

And our result:

See the Pen Using 100% Height by Matt Boldt (@mattboldt) on CodePen



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.

This doesn't really make a whole lot of sense to me, but in the past I thought people were detecting screen height with javascript and manipulating the top div's height from there. Yuck! Very glad this is such a simple trick. And, best of all, it's compatible across browsers. I've tested all the way back to IE7 with the same result. Brilliant!