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 - Beyond the Basics Working with Media Queries Adaptive Layouts: Narrow Viewports

Drew Butcher
Drew Butcher
33,160 Points
Posted by Drew Butcher
Drew Butcher
33,160 Points

Footer Question/Challenge

In this video at around min 7:12 I noticed that the new layout caused the footer to appear very high on the page. BOOO :(

So my question/challenge: How would you keep the footer at the bottom of the page? ... I bet you are thinking absolute position (or maybe fixed)... wait... How would you keep the footer at the bottom of the page with empty space if there is not enough content to fill the page (like in the video -- agreed absolute position will work in this case) , and below all the content if the amount of content is greater than the viewport's height (absolute position will not work here because your footer would be over the content of the document)?

Here is a Fiddle to understand the problem: http://jsfiddle.net/dwvjt9y6/

To see the problem, switch between the height 300px and 600px (lines 9 and 10) also adjust the footer's position (line 14) between absolute and fixed.

CSS solutions only please, using JavaScript is cheating!

I hope Guil Hernandez or Nick Pettit will chime in on the :)

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Hi there Drew,

I believe to get the effect you want, which is to ensure the main layout scrolls behind the footer you should set a position property on your main layout of relative and a position property of fixed on your footer.

I changed the height to 600px to see the effect on the fiddle you linked to.

div{
    position: relative;
    background-color: orange;
    height: 600px;
    /* height: 600px; */
    margin: 20px 0;
}
footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: green;
}