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.

CSS

4 Answers

Hi 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
Ricky Catron
13,023 Points

When 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Hariidaran Tamilmaran
iOS Development Techdegree Student 19,305 Points

I tried the code because I want to stay at the bottom regardless of the browser's size. I did the following code:

style.css
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
Ricky Catron
13,023 Points

Can you post a screenshot or a link to one so I can get a better idea of what you mean?

--Ricky

Hi 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!

Link

Hope this helps Craig

Hariidaran Tamilmaran
seal-mask
.a{fill-rule:evenodd;}techdegree
Hariidaran Tamilmaran
iOS Development Techdegree Student 19,305 Points

Found 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