Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Josh Sheppard
Josh Sheppard
1,525 Points
Posted by Josh Sheppard
Josh Sheppard
1,525 Points

Creating correct size for a full page webpage section.

Hi there,

I don't know quite how to describe this question properly, so bear with me :)

I want to know how to breakdown my webpage into sections that fill the browser viewport - i.e. as you scroll down the page, each section fills the browser window perfectly.

I am sure many of you have seen this before, it's quite a modern technique. Clearly, I can set a background size to fill the dimensions of the browser, but I am curious if there is a more efficient way to do this.

1 Answer

mtch
mtch
8,521 Points

Have you tried using a vh unit ? vh stands for viewport height - so, height: 100vh; will take the whole viewport of the current browser window size.

1 vh = 1/100 of the viewport size.

Josh Sheppard
Josh Sheppard
1,525 Points
Josh Sheppard
Josh Sheppard
1,525 Points

I'll give that a go, thanks