CODEWITHSUNDEEP
htmlcsswordpresstwitter-bootstrap
Brett
Brett

Reputation: 419

HTML CSS - sticky footer

I've tried many different 'sticky footer' techniques, but for some reason I cannot get this to work on my site: http://codeandco.net/services/

Any ideas?

Note: this is different to a fixed footer. I'm trying to get the footer to 'stick' to the bottom of the window, but underneath any of the page content - like this: http://getbootstrap.com/examples/sticky-footer/

Upvotes: 1

Views: 1045

Answers (5)

nnn
nnn

Reputation: 338

Here's the way: use this example.

#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}

And don't forget this: 

body {
margin-bottom: 60px;
}

html {
position: relative;
min-height: 100%;
}

Upvotes: 1

akshaynagpal
akshaynagpal

Reputation: 3147

#footer
{   
    width:100%;
    bottom: 0;
    height: 20px;
    float:left;
}

Upvotes: 0

Brett
Brett

Reputation: 419

Code below worked.
Note: the 'footer-push' was the key to getting this to work:

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

footer, .footer-push {
    height: 75px !important; /* '.push' must be the same height as 'footer' */
    position: relative !important;
}

Some references from: http://ryanfait.com/html5-sticky-footer/

Upvotes: 1

nnn
nnn

Reputation: 338

If you need footer to be fixed, change footer style to this:

#footer {
background: #CCC;
color: #787878;
font-size: 13px;
position: fixed;
left: 0;
bottom: 0;
z-index: 100;
width: 100%;
}

But don't forget to add padding for body: 

body {
padding-bottom: 60px !important;
}

...or

main {
margin-bottom: 60px;
}

Upvotes: 0

Gelunox
Gelunox

Reputation: 792

add these 4 lines to #footer in your CSS

position: fixed;
bottom: 0;
left: 0;
right: 0;

Upvotes: 1

Related Questions