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

MrCraig · 21-09-2009, 05:42 PM

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

Hitman · 21-09-2009, 05:45 PM

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.

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.

AlexOC · 21-09-2009, 05:47 PM

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.

MrCraig · 21-09-2009, 05:47 PM

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)

Hitman · 21-09-2009, 05:51 PM

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

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.

AlexOC · 21-09-2009, 06:08 PM

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?

Hitman · 21-09-2009, 06:11 PM

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.

Jamesy · 21-09-2009, 06:11 PM

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

Hitman · 21-09-2009, 06:22 PM

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!

Homosexual · 21-09-2009, 08:55 PM

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

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

Thread Tools

Posting Permissions