html - 页脚不粘在页面底部(未固定)

Question

我试图将页脚放在页面底部 - 未固定。 HTML 布局如下:

<header><!-- content --></header>
<main>
    <div class="margin-center">
      <div class="individual">
          <section class="hours">
          </section>
      </div>
      <div class="stacked">
          <section class="blog">
          </section>
          <section class="pets-seen">
          </section>
      </div>
    </div>
</main>
<footer>
 <!-- footer content -->
</footer>

以下是我的CSS:

footer {
  /* color */
  background-color: #334051;
  color: #fff;

  /* position and size */
  position: absolute;
  left: 0;
  width: 100%;
}

main {
  width: 100%;
  height 500px;
  margin-top: 250px;
  position: relative;
}

除了显示在其余内容之上的页脚外，页面的所有方面都正常工作并显示良好。

Answer 1

当您使用 position: absolute 时，就会发生这种情况。您可以阅读更多 here .只需将其删除，标准 (static) 即可正常工作。

footer {
  /* color */
  background-color: #334051;
  color: #fff;

  /* position and size */
  width: 100%;
}

main {
  width: 100%;
  height 500px;
  margin-top: 250px;
  position: relative;
}

<header><!-- content --></header>
<main>
    <div class="margin-center">
      <div class="individual">
          <section class="hours">
          </section>
      </div>
      <div class="stacked">
          <section class="blog">
          </section>
          <section class="pets-seen">
          </section>
      </div>
    </div>
    <img src="https://www.placecage.com/1000/1000">
</main>
<footer>
 <!-- footer content -->
 This is the footer
</footer>