CODEWITHSUNDEEP
javascripthtmlcsssticky-footer
Evgenij Reznik
Evgenij Reznik

Reputation: 18614

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.

Upvotes: 0

Views: 30

Answers (1)

Maciej Wojcik
Maciej Wojcik

Reputation: 2171

You have to change position absolute to this:

 position:fixed;
  bottom:0;

here is the fiddle

Upvotes: 1

Related Questions