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 CSS Foundations CSS Gradients Transparent Gradients

Posted by Daniel Hauenstein
Daniel Hauenstein
Courses Plus Student 4,630 Points

Any side-effect with setting the HTML element height always to 100%?

I have seen in several videos of the CSS Foundation class that some effects will only have the desired effect when the HTML element height is set to 100%(for instance when using the transparent gradient effect). Is there any side-effect to setting this element height to 100% in general? Would it be a problem to use this in a normalize.css file for a basic page set-up?

1 Answer

Zachary Dahan
Zachary Dahan
2,392 Points
Zachary Dahan
Zachary Dahan
2,392 Points

Technically, if you're using the html, body { height: 100%; } there's no problem with your website ( because in memory, if you define a height with percents — and without the height: 100% in the html, body {} — it does nothing.)

And for normalize.css, I didn't use it but the Mayer's reset and when you've included it normally (when you've include the normalize.css before every single SwaggSheet) there's no problem with it. Those reset are made to delete default and undesired user agent's CSS, not to create incompatibility.

Hope this answer your question correctly. ;)

Ps : I've checked the normalize.css and I double check, nothing will screw up.

Daniel Hauenstein
Daniel Hauenstein
Courses Plus Student 4,630 Points

Awesome, thanks for the quick answer!