html - CSS：页脚不会底部？

Question

当内容比整个页面长时，页脚会到底部，你必须向下滚动才能看到页脚，但是当它只是内容少且没有滚动时，底部和页脚之间有空格吗？

我正在使用 bulma CSS 框架，这里是代码

.footer {
  padding: 1rem 1.5rem 1rem;
  bottom: 0 !important;
  width: 100%;
  padding-bottom: 18px;
  background-color: whitesmoke;
  padding: 3rem 1.5rem 6rem;
}

<footer class="footer">
  <div class="container">
    <div class="content">
      <p><i class="fa fa-hashtag"></i> &nbsp;&copy; 2017 - Project Name</p>
      <p class="copyright">Built on the EC9 Platform with <a href="https://laravel.com/" target="_new">Laravel</a>, <a href="https://bulma.io/" target="_new">Bulma</a> and <span class="icon is-small"><i class="fa fa-heart"></i></span>.</p>
    </div>
  </div>
</footer>

预习：

Answer 1

您的 CSS 代码是重复的填充。

.footer {
  position: absolute;
  bottom: 0;
  padding: 1rem;
  width: 100%;
  background-color: red;
}

Hello
<footer class="footer">
  <div class="container">
    <div class="content">
      <p><i class="fa fa-hashtag"></i> &nbsp;&copy; 2017 - Project Name</p>
      <p class="copyright">Built on the EC9 Platform with <a href="https://laravel.com/" target="_new">Laravel</a>, <a href="https://bulma.io/" target="_new">Bulma</a> and <span class="icon is-small"><i class="fa fa-heart"></i></span>.</p>
    </div>
  </div>
</footer>

Answer 2

你可以使用poition: absolute; 底部：0；并为其添加margin-top = 它的高度（您的页脚）。