user1170330 user1170330 - 3 months ago 15
CSS Question

Adjusting Sticky Footer to long Texts

I'm trying to create a sticky footer. I found an example here and adjusted it.

However, it doesn't seem to adjusts to long texts. When the content is long enough, so that a scroll bar appears, the content just flows under the footer, instead of always staying above.

JS:

function myFunction() {
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}


CSS:

footer div {
display: inline-block;
vertical-align: top;
right: 50%;
padding: 10px;
}

footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
min-height: 30px;
line-height: 30px;
vertical-align: middle;
background-color: #1A1A1A;
color: #a9a9a9;
border-top: 8px solid #2F2F2F;
padding: 10px 40px 20px;
font-size: 0.7em;
overflow: hidden;
}


Here is a fiddle.

Answer

You have to change position absolute to this:

 position:fixed;
  bottom:0;

here is the fiddle

Comments