Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.
Hariidaran Tamilmaran
iOS Development Techdegree Student 19,305 PointsCommon Footer Problem
I need help for making the footer stay at the bottom of the page. Can you please do it in CSS in less words?
4 Answers
Craig Watson
Pro Student 27,126 PointsHi Hariidaran,
are you wanting it fixed at the bottom of the screen at all times with the main page contents scrolling behind it ?
Like this here...
Craig
Ricky Catron
13,023 PointsWhen you mean bottom of the page do you mean bottom of the screen or bottom of the content regardless of how long or short it is?
If you mean bottom of the screen you want
footer {
position:absolute;
bottom:0;
}
If you mean the bottom of the content put a div between the header and footer give it the styles of
.myDivStyles {
/*min-height:calc(100% - (heightOFHeaderInEMorPX + heightOFFooterinEMorPX));*/
/*Example with a header height of 5em and a footer height of 3em*/
min-height:calc(100% - (5em+ 3em));
}
If you meant something else please ask!!
Goodluck! --Ricky
Hariidaran Tamilmaran
iOS Development Techdegree Student 19,305 PointsI tried the code because I want to stay at the bottom regardless of the browser's size. I did the following code:
footer {
position: absolute;
bottom: 0;
text-align: center;
}
But i want the footer to stay at the center. But it goes to the left. Please help!
Regards, Hariidaran
Ricky Catron
13,023 PointsCan you post a screenshot or a link to one so I can get a better idea of what you mean?
--Ricky
Hariidaran Tamilmaran
iOS Development Techdegree Student 19,305 PointsHere's a link at CodePen: http://codepen.io/C0D3R_HT/pen/JdPpvM
I mean the footer has to be aligned at the center, but at the bottom of the page. Thanks.
Craig Watson
Pro Student 27,126 PointsHi I found a few things and had a little play around and got to this from a little digging :)
And from now on I will be using its great!
Hope this helps Craig
Hariidaran Tamilmaran
iOS Development Techdegree Student 19,305 PointsFound out that if a lot of content is added to the page, the footer automatically goes to the bottom of the page and could be aligned to your desired choice. Thanks Craig and Ricky.
Regards, Hariidaran