这里变得灵活！

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

这里变得灵活！

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 !

Answer 2

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

希望这会有所帮助;）

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

Answer 4

用于单页应用程序

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

complex<float>

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

4 个答案:

这里变得灵活！

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