页脚位置每次都更改

Question

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

有人能帮我一下吗？

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>

app.component.css

.app-container {
  position: relative;
  left: 35px;
  width: 98%;
  top: 50px;
}
.app-header {
  background: #f4f4f4;
  /* left: 40px; */
  position: absolute;
  top: 0;
  height: 50px;
  z-index: 1;
  width: 100%;
}

.app-footer {
  position: absolute;
  bottom: 0;
  height: 20px;
  z-index: 1;
  width: 98%;
  clear: both;
}

页脚.组件

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

footer.component.css

.container {
  padding: 10px;
}

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

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

Answer 1

您应该将您的整个组件包装到一个容器中，该容器具有min-height：100%和position：relative。保持app.footer类的原样。欲了解更多信息，请阅读本文