页脚拒绝粘在底部

Question

正在学习 HTML 和 CSS 并提出了一些我不理解的东西。

有谁知道为什么我的页脚几乎显示在页面顶部。

这是我认为我做对的事情，

1) 将正确的页脚 HTML 放在页面底部

2) 添加我的核心页脚 CSS 使其始终位于底部并且响应迅速

Codepen - https://codepen.io/nightcoder21/pen/BxwVdJ

我的html

  <footer>
    <div id="icons">
      <li class="list-inline-item"><a href="javascript:void();"><i class="fab fa-facebook"></i></a></li>
      <li class="list-inline-item"><a href="javascript:void();"><i class="fas fa-mobile-alt"></i></a></li>
      <li class="list-inline-item"><a href="javascript:void();"><i class="fas fa-envelope"></i></a></li>

    </div>
    <p class="text-center">yadayada</p>
  </footer>

除了从更有经验的人那里得到解决方案外，如果有人能准确地告诉我哪里出了问题，以便我学习，我将不胜感激。

感谢阅读

干杯

Answer 1

将 position: relative; 添加到您的 body 标签。

已更新 CodePen：https://codepen.io/anon/pen/deJwrw

页脚拒绝粘在底部

footer is refusing to stick to bottom

html

css

footer

responsive-design