【问题标题】：how to keep a footer at the bottom of the page, even if the content grows? [duplicate]即使内容增长，如何在页面底部保留页脚？ [复制]
【发布时间】：2019-06-03 12:05:26
【问题描述】：

我正在开发一个单页，并且我有一个共享的页脚布局，我想始终将其保留在页面底部，甚至我想知道是否有办法不以某种方式将其可视化即使它已经在 app.component.html 中声明了

我已经在 scss 上测试了所有可能的页脚位置

app.component.html

<div class="grid-container">
<main [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''">
<router-outlet #o="outlet"></router-outlet>
</main>
<rb-footer class="footer"></rb-footer>
</div>
<rb-modal></rb-modal>

app.component.scss

:host {
    .grid-container {
      display: grid;
      grid-template-rows: auto 1fr auto;
      grid-template-columns: auto;
      height: 100vh;
    }

.footer {
  position: initia
  width:100%;
  height:40px;

  }

  }

【问题讨论】：

尝试将grid-container 的高度更改为height: calc(100vh - 40px) 并设置max-height: calc(100vh - 40px) 您可能需要将overflow-y: auto 添加到容器中。

标签： css angular scss-mixins

【解决方案1】：

FLEX 来了！！

header, footer, content { display: block; }

container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  max-height: 100vh;
  height: 100vh;
  overflow: hidden;
}

header {
  flex: 0 0 50px;
  height: 50px;
  background: coral;
}

footer {
  flex: 0 0 50px;
  background: coral;
}

content {
  flex: 1 1 auto;
  overflow: hidden;
  overflow: auto;
  background: teal;
}

<container>
  <header></header>

  <content>
    <div style="width: 200vw; height: 200vh;"></div>
  </content>

  <footer></footer>
</container>

使用 flex 布局，您永远不必担心您的内容流：它已被处理。更好的是，Angular has its own implementation：请看how simple it is !

【讨论】：

【解决方案2】：

footer {位置固定;底部：0;}

希望这会有所帮助；）

【讨论】：

【解决方案3】：

如果您想在每个页面上显示它，或者如果您想添加一些文件，那么最好创建 footer.html 并将该文件包含在 app.html 中，然后只需在相应页面的最后一部分包含标题即可。您可以像这样添加页脚：

在应用文件中：

<div data-ng-include=" 'tpl/blocks/footer.html' " >

或者在单独的文件中：

<div  ng-include="'tpl/blocks/footer.html'">
    {% include 'blocks/footer.html' %}
</div>

【讨论】：

【解决方案4】：

对于单页应用程序

.footer{
position:fixed;
bottom:0px;
background-color:red;
width:100%;
height:30px;
}
.footer p{
text-align:center;
color:white;
margin-bottom:0px;
}

.header{
background-color:blue;
height:30px;
}

.header p{
text-align:center;
color:white;
margin-bottom:0px;
}

<div class="header">
<p>Header-logo<p>
</div>
<div class="footer">
<p>Footer-logo<p>
</div>

【讨论】：