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
Joel Pendleton
19,230 PointsCan someone explain this statement to me?
Because body isn't positioned (or more accurately, it's position:static by default), setting a child element to height:100% causes it to be 100% of the height of the html element, not the body element. Thus, if you want something to be as tall as the body is (going down past the bottom of the page) use body { position:relative }
Why would the child element's height be set to the height of the html rather than the body? Can someone explain this to me in more detail?
1 Answer
Iain Simmons
Treehouse Moderator 32,305 PointsBecause percentage heights are calculated on containing block elements with explicit heights. If it can't find one in the immediate parent container, it goes 'up' the DOM to the next parent until it finds a height it can work with.
In this case, because you generally don't have a height set on body and it is 'not positioned' as you quoted, it goes up to the html element. The html element's height will be the viewport height, and the body height is the actual height of the entire document/page.
I'm not sure this is fully explaining it... how about... 'CSS is weird'. :)
Joel Pendleton
19,230 PointsJoel Pendleton
19,230 PointsThanks anyway :)
Iain Simmons
Treehouse Moderator 32,305 PointsIain Simmons
Treehouse Moderator 32,305 PointsMaybe Guil Hernandez would have a better explanation?