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

HTML

Posted by Ryan Hellerud
Ryan Hellerud
3,635 Points

how to keep the <footer> at the bottom of the screen on large screens.

Hi guys I have a pretty simple question. How do I keep the footer element at the bottom of the screen no matter the screen size? Right now, on a large screen the footer will not be at the bottom but the body will bleed through the footer and fill in the rest of the space at the bottom. Kind of annoying.

4 Answers

Jovanny Elias
Jovanny Elias
16,204 Points

Are you talking about a footer that stays on the bottom even when scrolling if so here is an article that shows you how to do that.

http://css-tricks.com/snippets/css/sticky-footer/

Or if you just want to get rid of the white space and keep it at the bottom page. Take a look at this

http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

Ryan Hellerud
Ryan Hellerud
3,635 Points

thanks guys this worked wonders!

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

It's not actually a super easy answer, and part of the solution depends on your markup.

One way is to give the footer an absolute position and zero out the bottom.

Here was another pretty creative solution I found on CSS-Tricks http://css-tricks.com/snippets/css/sticky-footer/

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Ryan,

I tend to give the body style the background colour of the footer and then use 100% width containers around the header and content sections to give a different background colour. That way even if the body stretches past the footer, the correct colour still shows.

If this is not for a full width footer you could center a 1px high background image slice on the body tag and repeat it down the page.

Hope that makes sense and is what you meant.

Thanks

-Rich

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

Hi there,

If there's not enough content to display, it won't take up the space and by default the default body colour is used. You can change the background of the body element to make it look fluid and to make sure the footer always appears at the bottom you could use a style like this

.footer {

   position: relative;
   bottom: 0px;
   width: 100%;
   background: #d4d4d4;

}