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 Layout Basics Getting Started with CSS Layout Creating a Sticky Footer

Alexandre Gomes
Alexandre Gomes
4,775 Points
Posted by 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
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
Alexandre Gomes
Alexandre Gomes
4,775 Points

Thanks for the clarification Nicholas! Greatly appreciated

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

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
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 :)