Display footer at bottom of page

Question

The footer isn't displaying right at the bottom of the page. How can I fix this?

  /* FOOTER */
  #footer {
    position: relative;
    bottom: 0;
    background-color: black;
    color: white;
    width: 100%;
    height: 5.5rem;        
    margin-left: -8px;
    padding-right: 16px;
    bottom: -8px;
   }

  <footer id="footer">
                  
             </footer>

Zachary McGee · Accepted Answer · 2019-11-26T17:54:33.253

3

You could change the position to absolute.

position: absolute;

  /* FOOTER */
  #footer {
    position: absolute;
    bottom: 0;
    background-color: black;
    color: white;
    width: 100%;
    height: 5.5rem;        
    margin-left: -8px;
    padding-right: 16px;
    bottom: -8px;
   }

   .footer-text {
     padding-left: 20px;
     padding-top: 10px;
   }

  <footer id="footer">
                  
  </footer>

edited Nov 26 '19 at 17:54

answered Nov 26 '19 at 17:50

Zachary McGee

504
1
4
16

Great it worked, thank you. @ZacharyMcGee – SK1dev Nov 26 '19 at 17:53
1

No problem @Rahni – Zachary McGee Nov 26 '19 at 17:55

score 0 · Answer 2 · answered Nov 26 '19 at 17:54

It is necessary to use position: absolute.

position: relative just displays an element relative to its normal position. If you put bottom: 10px for example, it will move the element up by 10px. Using bottom: 0px on a relatively positioned element has no effect.

/* FOOTER */

#footer {
  position: absolute;
  bottom: 0;
  background-color: black;
  color: white;
  width: 100%;
  height: 5.5rem;
  margin-left: -8px;
  padding-right: 16px;
  bottom: -8px;
}

.footer-text {
  padding-left: 20px;
  padding-top: 10px;
}

<footer id="footer">

</footer>

Display footer at bottom of page

2 Answers2