我如何确保页脚停留在页面底部？

Question

我有一个页脚组件，该组件当前正在另一组件的末尾呈现。 无论其他组件如何，如何确保它停留在页面底部。 我的其他组件包括顶部的标题，单击工具栏上的按钮时打开的侧面导航。

Answer 1

请尝试这样的标记。

<div class="container">
  <div class="header">
  <nav>
    HEADER
  </nav>
  </div>
  <div class="content">
    page
    <router-outlet></router-outlet>
  </div>
  <div class="footer">
    <h2>footer</h2>
  </div>
</div>

CSS

.container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header{
  flex-shrink: 0;
  flex-grow: 0;
  background: #039be5;
  padding: 3px 5px;
}
.content{
  flex-shrink: 1;
  flex-grow: 1;
  padding: 3px 5px;
  position: relative;
  overflow-y: auto;
}

.footer{
  flex-shrink: 0;
  flex-grow: 0;
  background: #eee;
  padding: 3px 15px;
}