Sticky Footer Issue

[alkdb1]

Hi everyone, I’m finding it very difficult to figure out how to make my site have a sticky footer. Here is the code I think that needs to be edited. Any suggestions? Thanks http://codepen.io/anon/pen/bVMazy

#main-footer {
margin: 0 0 10px;
}

#main-footer a {
color: #4c4c4c;
}

#main-footer a:hover {
color: #111;
text-decoration: none;
}

#footer-widgets {
padding: 50px 0 0;
}

.footer-widget {
float: left;
width: 270px;
margin-right: 75px;
color: #4c4c4c;
}

.fwidget {
margin-bottom: 65px;
}

.last {
margin-right: 0;
}

.footer-widget h4.widgettitle {
padding-bottom: 18px;
color: #FFFFFF;
font-size: 24px;
font-weight: 300;
}

.footer-widget p {
line-height: 30px;
}

#footer-info {
padding-bottom: 50px;
text-align: center;
color: #d8d8d8;
}

#footer-info a {
color: #9e9e9e;
}

#footer-info a:hover {
color: #111;
text-decoration: none;
}

.footer-widget li {
padding: 0 0 15px 15px;
position: absolute;
}

.footer-widget li:before {
content: ”;
position: absolute;
top: 6px;
left: 0;
border: 3px solid transparent;
border-left-color: #6BA7A5;
}

.footer-widget li ul {
margin: 15px 0 -15px;
}

[Shikkediel]

Looks to be as basic as :

#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
}

[alkdb1]

Thanks. Unfortuately that didn’t work for me

[Shikkediel]

Best to elaborate and show the relevant markup then.

[alkdb1]

So I entered your code into another section in CSS. I also left in my colours. So the footer is now sticking to the bottom but is scrolling with the page. Any ideas? Thanks

#footer {
background: #006699;
padding: 30px 0 30px;
color:#fff;
width: 100%;
position: fixed;
left: 0;
bottom: 0;

[bearhead]

There are a few ways to create a sticky footer, here is one solution:
http://codepen.io/kvana/pen/zvjWOJ

To use it, the footer has to have a set height, although you could overcome that limitation with JS if need be.

[gitsraj]

Try,

http://codepen.io/gitsraj/pen/VvqydR

[Author]

Posts