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 Shan W.
Shan W.
4,910 Points

Flexbox footer at the end of page, not viewport.

Hi guys, if someone could PLEASE help me out on this, I'd be so happy!

I have my layout set up so that all direct children under body are flex items. There are three flex items: #header, #mainContent, #footer. The problem is, the footer goes to the bottom of the viewport, as opposed to the end of the page. So while the #mainContent has a a lot of content, and the page scrolls down, the footer actually still sticks to the bottom of the viewport. It's always visible. How do I get it to go to the bottom of the PAGE as opposed to the viewport using flexbox?

Kazimierz Matan
Kazimierz Matan
13,257 Points

It's hard to say without viewing your actual HTML and CSS code. Didn't you use "position: fixed;"?

1 Answer

Justin Hunter
PLUS
Justin Hunter
Courses Plus Student 11,484 Points
Justin Hunter
Justin Hunter
Courses Plus Student 11,484 Points

Agree with Kazimeirz. It seems like there must be a "fixed" position applied to the footer, otherwise, it should not scroll with the rest of the page.