頁腳 position 每次都更改

Question

我一直在嘗試創建一個可重用的頁腳組件，並希望它放置在底部，而不管 header 和頁腳之間的內容如何，但是對於某些頁面，它停留在底部，而某些頁面則位於頂部或中間。

有人可以幫我解決這個問題嗎？

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>

頁腳.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

您應該將整個組件包裝到最小高度的容器中：100% 和 position: relative。 保持你的 app.footer class 原樣。 欲了解更多信息，請閱讀這篇文章