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

Posted by Willam Cougan
Willam Cougan
7,127 Points

Page Height

I don't actually know if this is done with CSS, but I would like to know how to do it either way.

When I have a page with little content, my footer no longer reaches the bottom of the screen. It moves up to where the content ends.

I noticed in shirts4mike.com on the contact page, for example, the footer adjusts larger and smaller according the height of the device being used.

How is this done?

2 Answers

Ryan Allen
Ryan Allen
6,280 Points
Ryan Allen
Ryan Allen
6,280 Points

In modern browsers, the CSS calc() function can be used to set a dynamic height. (Some browsers might still require vendor prefixes).

html, body{
    height: 100%;
}
footer{
    height: 50px;
}
div#main-content{
    min-height: calc(100% - 50px);
}

http://jsfiddle.net/RzULn/

Or you could fix the postion of your footer on the bottom. Then add padding-bottom to the content div equal to the height of your footer.

html, body{
    height: 100%;
}
footer{
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}
div#main-content{
    padding-bottom: 50px;
}
James Barnett
James Barnett
39,199 Points

In modern browsers, the CSS calc() function can be used to set a dynamic height.

There's no support for calc in IE >9, Opera >15 & Firefox >4 this leads to a broken page layout in over 25% of browsers according to current market share.

Now you can use a fallback but then you still have to solve this issue without calc, so you might as well not bother with it at all.

Ryan Allen
Ryan Allen
6,280 Points

Gotta encourage browser updates somehow! (just playin... but serisouly.)

As a (imperfect) fallback for that method, you could make the body background the same as the footer background and put a min-height on the #main-content div.

Ryan Allen
Ryan Allen
6,280 Points

Also, should say IE <9, Opera <15, Firefox <4 (discontinued in 2011 - shouldn't even count :P)

Randy Hoyt
STAFF
Randy Hoyt
Treehouse Guest Teacher
Randy Hoyt
Randy Hoyt
Treehouse Guest Teacher

You'll often hear this called a "sticky footer" ... because the footer sticks to the bottom of the window. Chris Coyier posted a good article on how to do this recently:

(His technique requires that the footer have a known and fixed height.)