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

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...

Code:

---

.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...

Code:

---

.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.

position: relative; should do the trick.

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! :P

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

Quote:

---

Originally Posted by Homosexuality

position: relative; should do the trick.

---

Nope, does the same as static in this instance. :(

Quote:

---

Originally Posted by Biohazard

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! :P

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?

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

Quote:

---

Originally Posted by Hitman

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. :(

Quote:

---

Originally Posted by Homosexuality

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).

Quote:

---

Originally Posted by Biohazard

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...

Code:

---

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

---

Quote:

---

Originally Posted by Hitman

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



Not working. :( Tried relative and static too...

Code:

---

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

---

---

Code:

---

.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. ;)

Quote:

---

Originally Posted by Biohazard

Code:

---

.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. :P top:0 will make it stick to the top, I did test it just in case and it did. :(

does

Code:

---

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?

try something like this is all i can suggest

HTML Code:

---

<html>
<head>
<style>
.container{
height:90%;
width:100%;
border: 1px solid black;
}
.footer{
height:10%;
width:100%;
border:1px solid red;
}
</style>
</head>
<body>
<div class="container">Main content..</div>
<div class="footer">Footer Content..</div>
</body>
</html>

---

I only really added the border tags for any debugging but it looks like it works, dunno if its exactly what you want though

Quote:

---

Originally Posted by AlexOC

does

Code:

---

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?

---

I don't want it to be like facebooks bar, but what you posted looks like it'd do that.

Quote:

---

Originally Posted by MrCraig

try something like this is all i can suggest

HTML Code:

---

<html>
<head>
<style>
.container{
height:90%;
width:100%;
border: 1px solid black;
}
.footer{
height:10%;
width:100%;
border:1px solid red;
}
</style>
</head>
<body>
<div class="container">Main content..</div>
<div class="footer">Footer Content..</div>
</body>
</html>

---

I only really added the border tags for any debugging but it looks like it works, dunno if its exactly what you want though

---

Now that works (for those two divs you posted)... I'll have a try at putting the content in a div and then just the footer. Cheers.

Quote:

---

Originally Posted by Hitman

I don't want it to be like facebooks bar, but what you posted looks like it'd do that.


Now that works (for those two divs you posted)... I'll have a try at putting the content in a div and then just the footer. Cheers.

---

Well it shouldnt do that, it should be at the bottom of the full page. i think.

Try it. because it positions itself below 100% of the content, then takes away half of itself to fit on.

You MAY have to include an iframe in the container div if you want to put lots of content in it though as im not too sure what'll happen if you overfill it (but im guessing it'll stretch)

Quote:

---

Originally Posted by AlexOC

Well it shouldnt do that, it should be at the bottom of the full page. i think.

Try it. because it positions itself below 100% of the content, then takes away half of itself to fit on.

---

Tried, does the same as the facebook bar because its position is absolute... :(

Quote:

---

Originally Posted by MrCraig

You MAY have to include an iframe in the container div if you want to put lots of content in it though as im not too sure what'll happen if you overfill it (but im guessing it'll stretch)

---

Yeah it'll stretch.

Quote:

---

Originally Posted by Hitman

Tried, does the same as the facebook bar because its position is absolute... :(

Yeah it'll stretch.

---

Cant you change the position?

Quote:

---

Originally Posted by AlexOC

Cant you change the position?

---

As I said, I've tried the other positions... static, relative, fixed... they all don't do it.

Getting a footer to stick at the bottom without going over the text is extremely difficult. HTML was never made with the same control you have over width in height :/.

Think I have it...

Code:

---

.footer {
    background-image:url(images/footerbg.png);
    background-repeat:repeat-x;
    width:100%;
    height:74px;
    position: relative;
    margin: 12em 0 0;

}

---

Seems to be working!

Not to do with the question, but use shorthand for everything:

Code:

---

.footer {
background:url(images/footerbg.png) repeat-x;
width:100%;
height:74px;
position:relative;
margin:12em 0 0
}

---

Improves loading time :)

Quote:

---

Originally Posted by Homosexuality

Not to do with the question, but use shorthand for everything:

Improves loading time :)

---

Only by the smallest amount possible. :P

But still, it helps old grannies on 56k.

Theres a tutorial on his website. :P i looked at the site map and found one :P

Ill give you the code:

Code:

---

* {
        margin: 0;
}
html, body {
        height: 100%;
}
.wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
        height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

---

and inside the layout

Code:

---

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

---

and the url:
http://ryanfait.com/resources/footer...ottom-of-page/

Hope this helped!

Found that before but it never worked properly. :(

Quote:

---

Originally Posted by Homosexuality

Not to do with the question, but use shorthand for everything:

Code:

---

.footer {
background:url(images/footerbg.png) repeat-x;
width:100%;
height:74px;
position:relative;
margin:12em 0 0
}

---

Improves loading time :)

---

I will thank you in 5 years time when it has saved me an entire second of my life.