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
Gina Bégin
Courses Plus Student 8,613 PointsHow to keep main page from scrolling at 12:29 in the "Width, Height and Overflow Properties" video?
I have noticed this on many sites, and it's annoying to me, so I'd like to make sure it doesn't happen on my own site that I'm designing. At 12:29 in the video, Guil is scrolling through text on an interior box; when it hits the bottom of the text there, the main page moves a big and scrolls (you'll see it also has a scroll bar). Since there is really no reason for the main page to move as there isn't any more info to show there, what is it in the properties of the page that are making it overflow & need a scroll bar?
I hope that makes sense...?
2 Answers
Jeff Busch
19,287 PointsHi Gina,
If the main page is scrolling there is either content (visible or invisible) or a height setting making the page scroll.
Jeff
Boris Vukobrat
4,248 Points@ginabegin
Property height: 100% is always in relation to a parent. So html will have 100% of viewport's height - browser's window height. The same applies to the body element. But then we have a nav elements with some content, and below the div element that holds again 100% of the height - of it's parent element which is body.
In total, our page has height of nav height + div height. Which are more then 100% so 'overflow' appears. So, in fact our page is over 'one screen high'.
Btw, scroll bars (and scrolling feature itself) can be turned off by adding property:
body {overflow:hidden;}
To hide scroll bars but preserve scrolling use:
body::-webkit-scrollbar {display: none;}
Gina Bégin
Courses Plus Student 8,613 PointsThank you for the in-depth answer! Do you know how I can review this reply later when I go to design my site? I don't see a way to highlight or save answers to a personal inbox or star them for later use.
Boris Vukobrat
4,248 PointsFor your posts/questions: Forum > MyPosts tab; For others' : Forum > Subscribed (after clicking on subscribe button up-right corner)