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
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
27,930 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
27,930 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