在页面底部显示页脚

Question

页脚没有显示在页面底部。我该如何解决这个问题？

  /* 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>

Answer 1

您可以将位置更改为绝对位置。

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>

Answer 2

需要使用position: absolute。

position: relative 只是显示相对于其正常位置的元素。例如，如果你输入 bottom: 10px，它会将元素向上移动 10px。在相对定位的元素上使用 bottom: 0px 没有任何效果。

/* 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

html

css

footer