[Request] Sticky Footer

[Occult]

Hey all. One thing many new coders struggle with, and what I'm struggling with right now, is a sticky footer.
By this, I mean where the footer will stick to the bottom of the page, no matter the size of the content or if you scroll down - the footer will ALWAYS be there.
Below I've given an example.


= is the sticky footer.
the l 's make up the page that can be seen.
the x 's represent the content on the page which can only be seen by scrolling down.

llllllllllllllllllllllllllllll
l..................... l
l..................... l
l..................... l
l..................... l
==========
x..................... x
x..................... x
x ..................... x
xxxxxxxxxxxxxxx

As you can see, the footer is at the bottom of the VISIBLE page, not at the bottom of the whole page.
It STICKS to the bottom of the VISIBLE page.

 

[Sysode]

So, you want a footer that's automatically stuck to the bottom of the page when you visit it and then stays there once the user scrolls down?

 

[Occult]

Yes. Please search 'Sticky Footer' on google if my explanation wasn't clear.

 

[Sysode]

Take a look here:

You must be registered for see links

@Occult

Just whipped this up quickly. If this is what you need (see demo) then I'll explain what I did to achieve this.

 

[Occult]

You've nailed it, nice. Not sure if this is a problem, but when you explain what you did could you include a padding/border of about 10px from the bottom?
Cheers.

Also, what other Alias' do you have? Reece Mathews sounds incredible familiar.

 

[Sysode]

You've nailed it, nice. Not sure if this is a problem, but when you explain what you did could you include a padding/border of about 10px from the bottom?
Cheers.

Also, what other Alias' do you have? Reece Mathews sounds incredible familiar.

Nice one man.

Here's how I went about doing it.

For the footer element:

width:100%;
padding:20px;
background:#222;
position:fixed;
bottom:0;

Width is defined to 100% just to ensure it stretches the full width. The padding has been added to allow content inside to flow and not touch the edges.
Position has been set to fixed in order to make sure the footer stays at the bottom of the page - this is where bottom:0; comes in, to make sure it's at the bottom to start with.

Remember that you ALWAYS need to define a position in order to use any base element (top, bottom, left, right).

Also, to make sure the padding doesn't effect the width of the footer, I used box-sizing. You can read more about it here:

You must be registered for see links

include a padding/border of about 10px from the bottom?

How do you mean? For the content or from the footer?

 

[Occult]

Cheers mate! Very helpful - the link too.
Very easy to follow.

Just with what I was talking about with the padding/border...
Is it possible to have the sticky footer sit ~10px up from the bottom of the VISIBLE page, and have the page background continue underneath?
I just find it neater that way.
However, this may be a problem as the content may be visible in the space between the bottom of the visible page and the footer...

Basically (and I hope you understand this as it may be a bit complex and my explanation may be poor)...
Is it possible to have the sticky footer ~10px up fmor the bottom of the VISIBLE page, and have the background continue underneath BUT disable any content from showing... so the content (including when it scrolls down) only comes up to the end of the footer.

You could make the footer have a bottom half with the background, but what if I use a pattern background? The pattern would be off when scrolling...

I'm just doing some abstract thought, let me know if you can't understand me .

 

[Sysode]

Ah, so you're wanting it 10 or so pixels from the page. This can be done by changing the value of your bottom.
For example, for 10px gap, you'd use this:

bottom:10px;

Simple, right?

However, for what you want I'd go about it differently. Providing your primary background color on your page is white, I'd simply add a border-bottom of 10px (or whatever gap you want) and make it white.
So, to your footer you would add:

bottom:0;
border-bottom:10px solid #FFF;

Make sense?

Here, take a look this to get a better picture of what I'm trying to say:

You must be registered for see links