html - 页脚外的文字

Question

我正在尝试向页脚添加文本，但我的第二个和第三个文本位于页脚下方。我该怎么做才能将它放在页脚中？我知道它与 block 级有关，但究竟需要做什么。请并感谢您花时间回答我的问题。

#footer {
  background: #2e3131;
  position: relative;
  height: 165px;
  margin-top: -100px;
  clear: both;
}

.footer-contact {
  color: #fff;
}

.headquaters {
  text-align: center;
  color: rgb(255, 0, 0);
}

.social-media {
  float: right;
  color: rgb(255, 0, 238);
}

<footer id="footer">
  <div class="footer-contact">
    <h3>Contact Us</h3>
    <p>Phone: (777) 777-7777</p>
    <p>Cell: (347) 777-7777</p>
    <p>E-mail: someone@gmail.com</p>
  </div>

  <div class="headquaters">
    <h3>Locations</h3>
    <p>90 John Street</p>
  </div>


  <div class="social-media">
    <h3>Follow our social media</h3>
    <i style="font-size:24px" class="fa">&#xf230;</i>
  </div>

</footer>

Answer 1

实际上，您是在为#footer 添加以 px 为单位的高度，您需要做的是增加高度。

#footer {
  background: #2e3131;
  position: relative;
  height: 500px;
  margin-top: -100px;
  clear: both;
}

或者您可以查看 here