Stick Footer at the Bottom

Question

I want to make the footer position at the bottom of the page. My code for footer is...

footer{
  height: 80px;
  background-color: rgb(93, 158, 255);
  color: white;
  text-align: center;
  position: relative;
  bottom: 0;
}

<html>
<body>
  <footer>
    <div class="footer">
      <h5>Copyrigth &copy;
        <script type="text/javascript">
          document.write(new Date().getFullYear());
        </script>
      </h5>
      <h5>Designed by:  - Junior Web Development</h5>
    </div>
  </footer>
</body>
</html>

Result is index.php

add position: fixed, i think you want to achive that your footer should be sticked always to the bottom of the screen — Andrii Sukhoi, Aug 09 '20 at 19:20
i want position: relative...page has e.x height:1000px then footer is bottom — usern, Aug 09 '20 at 19:21
Then you gotta position it as "fixed". There's no way to position it at bottom with "relative" positioning. Do it like, `position: fixed; bottom: 0;` — Pranav Rustagi, Aug 09 '20 at 19:32

score 0 · Answer 1 · answered Aug 09 '20 at 19:46

0

Maybe this would work for you.

footer{
    height: 120px;
    background-color: rgb(93, 158, 255);
    color:white;
    text-align: center;
    bottom: 0;
    position: fixed;
    width: 100%
}

answered Aug 09 '20 at 19:46

Adil Ahmed

395
1
11

score 0 · Answer 2 · answered Aug 09 '20 at 19:54

i think you forgot the dot in css class .footer, and you should use position: absolute;

here a working example, useful info about Css Layout

.footer{
    position: absolute;
    bottom: 0;
}

<div class="footer">
    <h5>Copyrigth &copy;
    <script type="text/javascript">
    document.write(new Date().getFullYear());
    </script>
    </h5>
    <div>
        <h5>Designed by:  - Junior Web Development</h5>
    </div> 
    </div>

Stick Footer at the Bottom

2 Answers2