Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Layout Basics Getting Started with CSS Layout Creating a Sticky Footer

Alexandre Gomes
Alexandre Gomes
4,775 Points

Why "min-height" instead of "height" for the wrapper ?

Why do we have to use min-height to define the wrapper height ? Could't we just use "height" to define the height of the wrapper, instead ?

Because if the wrapper ever happened to be more than (100% viewport height - footer height), there would than be a scrolling bar, isn't it ? So why not just use height instead.

Thanks for the answer :)

2 Answers

Nicholas Grenwalt
Nicholas Grenwalt
46,626 Points

It is mainly due to specificity. Min-height takes precedence over both height and max-height ensuring that you get the result you want and that it isn't accidentally overwritten later by a height or max-height call.

Alexandre Gomes
Alexandre Gomes
4,775 Points

Thanks for the clarification Nicholas! Greatly appreciated

Hi Alexandre,

If you used height then the wrapper will always remain that height even if there's more content. The content will overflow the wrapper and overlap with the footer. The wrapper will not expand to contain the extra content and the footer will not be pushed further down. I recommend that you switch to height and add in enough extra content to see how this looks.

With min-height, you're saying that the wrapper can't be less than this height but it can increase if the content requires it.

Alexandre Gomes
Alexandre Gomes
4,775 Points

Oh, all right! Turns out I didn't exactly get what viewport was.. So yeah, it makes sense indeed, that we want the height to be minimum ("visible height of the page"-"height of the header"), but that it can expend behind the visible part of the site if needed, if there's more content.

Thanks a lot :)