Footer - bottom of the page

[Nic727]

Hi,

 

I'm trying to make a footer that stay at the bottom of the page. For example, if I haven't enought content on my page, I have a white space and my footer appear at the bottom of the browser only if I put position : absolute; to it.

But if I reduce the size of the browser, now I have a sticky footer and I would like the footer at the bottom of the content.

 

How can I do that?

 

Thank you

[Don E]

It's called sticky footer. Check out this link that could help you achieve that: http://ryanfait.com/sticky-footer/

Edited September 15, 2015 by Don E

[dsonesuk]

step(1)

html, body {height: 100%; margin: 0; padding:0;} /*will make html and body same height as browser window instead of height of content */

step (2)

 

A container that wraps everything BUT! the footer must be given

#wrapper {min-height: 100%;} /*this will match exactly the height of body ie be height of browser window, but! able to grow when content grows beyond browser height*/

step(3)

 

Because the outer container height matches the height of browser window the footer below it is out of view and scrollbars are present and you need the scroll down to view the footer, which we don't want. So we bring it into view by using - top margin the same height of footer, so if footer height is 50px the margin will be the same

#footer {height: 50px; margin-top: -50px;} /* this will place the bottom edge of footer to the bottom edge of #wrapper which height is same as browser window, so scrollbars will disappear .*/

and that is basically it! you just need to add bottom padding (same height as footer) to content container, so content does not get hidden under footer.

[Nic727]

It's called sticky footer. Check out this link that could help you achieve that: http://ryanfait.com/sticky-footer/

But sticky footer is fixed on the screen if I scroll down or up.

 

I would like to have a kind of sticky footer if I don't have enough content, but if I have a lot of content, I just want to see the footer at the bottom of the page.

[dsonesuk]

Sticky footer remains at bottom until content forces it down, where it then acts like normal footer. A permanent sticky remain at bottom of browser window whatever content.

[Nic727]

Removed

 

Edited March 23, 2016 by Nic727

[dsonesuk]

No! As stated, everything but! The footer. The wrapper will be always be height of browser window, or bottom of content if content extend further than height of browser. The footer will be out of view because of wrapper, this is counteracted by given footer minus top margin the same height as footer. Padding on the bottom, the size of footer height is required to prevent content going below footer.

[Nic727]

So I should add a wrapper around my content with height: 100% and padding: (Footer height) and my footer should be relative with margin-top: -(footer height)

 

Is it what you mean?

[dsonesuk]

I've explained what is required, and I'm not going through it again! Just put it altogether as I explained and see.