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

CSS

Posted by Quicken Loans
Quicken Loans
12,654 Points

Single page section sizing

I am working on a single page bootstrap portfolio site. I would like each section to be a separate "page" and clicking a little arrow or scrolling down will move down to the next page.

You can see what I have so far here:

http://www.john-simmons.net

i.e The jumbotron would be a page, the About section would be the next page, and so on...

I am having trouble figuring out how size the different sections correctly. I figure there has to be a better way than declaring a height for each one and hoping they look ok on different screens :)

The type of effect I am trying to achieve (minus all the animations and whatnot) can be seen on http://www.stockflare.com

(fyi the picture isn't me, I grabbed it from uifaces.com)

Evan Starr
Evan Starr
733 Points

John,

The secret is the display: table; CSS property. If you go to the Stockflare site and inspect element on the "pages", you'll see how they are actually div's with display: table on them. This along with the other CSS elements height: 100% and width: 100% will fit the content within the user's viewport.

Quicken Loans
Quicken Loans
12,654 Points

Thanks Evan Starr

Looks like each of the slides has a class called .landing-slide on it that has the following properties 

display: table;
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
left: 0;

How do the overflow and position properties aid the in effect? Does using display: table automatically fill content to the viewport?

Guil Hernandez

1 Answer

Evan Starr
Evan Starr
733 Points
Evan Starr
Evan Starr
733 Points

The position: absolute makes it so that each "page" stays within one screen area. It is telling the browser that "This page should be 100% of the screen, no bigger no less!" Taking this off will cause a page to layer over the others. The overflow: hidden is just there so that if all the content for a page isn't able to be displayed in one viewport (viewing on a small display), that it will cut out the content rather than having it bleed onto the other pages. It can also help prevent a scrollbar from displaying.