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>

在页面底部显示页脚

2 个答案: