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

jackass · 21-09-2009, 09:07 PM

Originally Posted by Homosexuality

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

Improves loading time

Only by the smallest amount possible.

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

But still, it helps old grannies on 56k.

jacko2244 · 24-09-2009, 09:08 PM

Theres a tutorial on his website.

i looked at the site map and found one

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!

Hitman · 25-09-2009, 06:20 PM

Found that before but it never worked properly.

Chippiewill · 26-09-2009, 12:03 AM

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.

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

Thread Tools

Posting Permissions