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

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