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 Sean Cackoski
Sean Cackoski
4,450 Points

Getting footer to the bottom of the page

Hello!

I'm struggling to get my footer to stay at the bottom of the page. Currently my content is only taking up just enough space for it to be seen, and the footer is stuck right underneath it. Do I need to adjust the content, or is there a way to make the footer stick to the bottom?

Laurence Foley
Laurence Foley
16,695 Points

HTML

<footer id="footer">
  Footer
</footer>

CSS

#footer {
  position: fixed;
  width: 100%;
  bottom: 0;
}

2 Answers

Unsubscribed User
Unsubscribed User
8,841 Points
Unsubscribed User
Unsubscribed User
8,841 Points

In CSS, for referencing an element with an id , we used the "#" symbol (#"id name"). When referencing the elements directly, we dont use the "#" symbol. can you remove the symbol and try it out.

The below code will satisfy your expectation

footer { position:fixed; bottom:0; }

Laurence Foley
Laurence Foley
16,695 Points

The problem with that is that you would be selecting all footer elements on the page and they would overlap each other.

Patrick Cooney
Patrick Cooney
12,216 Points
Patrick Cooney
Patrick Cooney
12,216 Points

You've encounter the. absolute. worst. problem in HTML/CSS land. As far as I'm aware the "sticky footer" is still the only way to achieve your goal. Check out this page for more info. I've used that on a couple of websites.