如何在页面底部保留页脚，即使内容增长

Question

我正在开发一个单页，我有一个共享的页脚布局，我想始终将其保留在页面底部，甚至我想知道是否有办法不在某些路线中可视化它，即使它已在 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;
  }
  }

Answer 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>

使用弹性布局，您永远不必担心内容流：它就像处理一样。更好的是，Angular有自己的实现：看看它有多简单！

Answer 2

页脚 {位置固定;底部：0;}

希望这对;)有所帮助

Answer 3

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

在应用程序文件中：

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

否则在单独的文件中：

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

Answer 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>