Making a div stay at the bottom of the page (not bottom of browser window)

[Hitman]

Hi, basically I have a div that is my footer on a page. I want it to stay at the bottom of the page, so if you have a big screen then you'll see the content, and the footer will be at the bottom and if you have a small screen you'll see the content, have to scroll down and see the footer.

The way I was doing the footer was along the lines of...

.footer {
position:absolute;
bottom: 0;
}

That makes the footer stay at the bottom of the page, which is good, but it also makes it stay at the bottom of the browser window, so if you have a small screen then it covers the content...

So I tried...

.footer {
position:static;
bottom: 0;
}

That doesn't stick to the bottom of the page or browser window - I want it to stick to the bottom of the page but not the window...

Any help, please? An example of what I want: http://ryanfait.com/ like that footer.

[Homosexual]

position: relative; should do the trick.

[jackass]

Doesn't 'bottom: 0;' make it go to the bottom of the broswer anyway?

You need to set an actual distance from the top of the page (for example, if your site had a height of 1000px, then set it to 1020px etc.)

Correct me if i'm wrong!

EDIT; Wait, ignore that, just make a container with a set height, and put the footer div inside that.

[Hitman]

position: relative; should do the trick.

Nope, does the same as static in this instance.

Doesn't 'bottom: 0;' make it go to the bottom of the broswer anyway?

You need to set an actual distance from the top of the page (for example, if your site had a height of 1000px, then set it to 1020px etc.)

Correct me if i'm wrong!

EDIT; Wait, ignore that, just make a container with a set height, and put the footer div inside that.

The thing is the height is going to change as more or less content is entered... I'll try the second suggestion in a minute. Cheers Jack, how's IMG Upload going?

[Homosexual]

Just set the height to a specific size, e.g. 'height: 100px;'

[jackass]

Nope, does the same as static in this instance.


The thing is the height is going to change as more or less content is entered... I'll try the second suggestion in a minute. Cheers Jack, how's IMG Upload going?

No problem.

And it's going okay thanks, but my internet has been broken the past couple of weeks, and is going to cost a LOT for it to be fixed, so it's probably going to be a while before I can finish it.

[Hitman]

Just set the height to a specific size, e.g. 'height: 100px;'

The height of the footer is (didn't show full code, my bad).

No problem.

And it's going okay thanks, but my internet has been broken the past couple of weeks, and is going to cost a LOT for it to be fixed, so it's probably going to be a while before I can finish it.

Not working. Tried relative and static too...

.footercont {
    width:100%;
    position: fixed;
    height:73px;
    bottom: 0;
}
.footer {
    background-image:url(images/footerbg.png);
    background-repeat:repeat-x;
    width:100%;
    height:73px;
}

[jackass]

The height of the footer is (didn't show full code, my bad).



Not working. Tried relative and static too...

.footercont {
    width:100%;
    position: fixed;
    height:73px;
    bottom: 0;
}
.footer {
    background-image:url(images/footerbg.png);
    background-repeat:repeat-x;
    width:100%;
    height:73px;
}

.footercont {
    width:100%;
    position: fixed;
    height:1000px;
    top: 0;
}
.footer {
    background-image:url(images/footerbg.png);
    background-repeat:repeat-x;
    width:100%;
    height:73px;
}

Try that.

As you're working from the bottom, it adds it to the bottom of the browser - upwards.

[Hitman]

.footercont {
    width:100%;
    position: fixed;
    height:1000px;
    top: 0;
}
.footer {
    background-image:url(images/footerbg.png);
    background-repeat:repeat-x;
    width:100%;
    height:73px;
}

Try that.

As you're working from the bottom, it adds it to the bottom of the browser - upwards.

That wont work. top:0 will make it stick to the top, I did test it just in case and it did.

[AlexOC]

does

top: 100%;
margin-top: -100px; (half of your div height)
position: absolute;

make it stay at the bottom, in view, even if you scroll down?

like facebooks bottom bar?