Html 每次页脚位置都会改变

我一直在尝试创建一个可重用的页脚组件，并希望它放在底部，而不管页眉和页脚之间的内容如何，但对于某些页面，它停留在底部，而对于某些页面，它要么在顶部，要么在中间

有人能帮我吗

app.component.html

<custom-theme>
  <div class="">
    <div class="">
      <div class="">
        <menu></menu>
      </div>
      <div class="">
        <breadcrumb></breadcrumb>
        <div class="app-header">
          <img />
          <div class="header-icon">
            <img alt="Language" class="header-icon-image"/>
            <div class="header-icon-text"</div>
          </div>
          <div class="header-icon-container">
            <img class="header-icon"/>
            <div class="header-icon-text"</div>
          </div>
        </div>
        <div class="app-container">
          <router-outlet class="col-12"></router-outlet>
        </div>
        <div class="app-footer">
          <footer></footer>
        </div>
      </div>
    </div>
  </div>
</custom-theme>

Footer.component

<div class="container">
  <div class="dateinfo">
    <p>Date</p>
  </div>
  <div class="imprint">
    <p>imprint</p>
  </div>
</div>

---

您应该将整个组件包装到最小高度为100%且位置为相对的容器中。保持app.footer类不变。有关更多信息，请阅读此

您能详细说明吗？我阅读并尝试做同样的事情，但仍然在一些动态显示内容的页面上重叠。

<div class="container">
  <div class="dateinfo">
    <p>Date</p>
  </div>
  <div class="imprint">
    <p>imprint</p>
  </div>
</div>

.container {
  padding: 10px;
}

.dateinfo{
  margin-left: 42px;
  float: left;
  font-size: 16px;
}

.imprint {
  margin-right: 30px;
  float: right;
  font-size: 16px;
}