CODEWITHSUNDEEP
htmlcss
Tropilac
Tropilac

Reputation: 47

Position footer at the bottom of the page at all times

I have currently got a footer in my website that I want to have at the bottom of the page at all times. It is only one line on most screens so I thought it would be a good idea to have it always there. I want to stay away from JavaScript too.

CSS

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}

HTML

<div class="footer">
    <p class="footer">Design by <a class="footer" href="http://www.tropilac.com">Tropilac</a></p>
</div>

Upvotes: 2

Views: 90

Answers (3)

m4n0
m4n0

Reputation: 32255

Use position: fixed if you need to show at all times.

html,
body {
  margin: 0;
  padding: 0;
}
* {
  margin: 0;
  padding: 0;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: lightgray;
  color: black;
}
<html>

<body>
  <div class="footer">
    <p class="footer">Design by <a href="http://www.tropilac.com">Tropilac</a>
    </p>
  </div>
</body>

</html>

Upvotes: 3

Hemal
Hemal

Reputation: 3760

Use position:fixed and bottom:0 to get what you want

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  }

Upvotes: 0

Kilmazing
Kilmazing

Reputation: 526

Try positioning your element to fixed. This is useful for elements such as a footer as if you do something like this: 

.footer {
  position: fixed;
  height: 50px;
  border: 1px solid #ccc;
  position: fixed;
  bottom: 0;
  left: 10%;
  right: 10%;
}

This will give you a footer that stays at the bottom of the viewport. One drawback is that if the content is longer than the page the footer will still show positioned at the bottom of the page. This code will also give you your 80% width.

Fiddle: http://jsfiddle.net/p16rwgnn/

Upvotes: 1

Related Questions