Angular 2 粘性页脚实现答案

【问题标题】：Angular 2 sticky footer impementationAngular 2 粘性页脚实现
【发布时间】：2017-07-20 02:36:12
【问题描述】：

我希望我的页脚是一个粘性页脚，并尝试遵循 css 技巧负边距技巧，但没有奏效。我试图在下面的 plunker 代码中模拟我的 angular2 应用程序。我希望贴纸不是固定的，而是粘性的，当主要部分中有更多可用内容时，它会转到底部。请注意，页脚显示在主要部分的数据上方。

http://plnkr.co/edit/WSUC4xLMWH6fY77UyFqI?p=preview&open=app%2Fapp.component.ts

app.component:

<nav-bar></nav-bar>
  <section class="main">
    <div class="main-container">
      Display my router-outlet here          
      <ul>
      <li *ngFor="let hero of heroes">
        {{ hero }}
      </li>
    </ul>

    </div>
  </section>
  <footer-component></footer-component>

感谢任何修复和向下移动页脚的帮助。

【问题讨论】：

不完全确定你的目标是什么，但你的“main”类风格有绝对的地位。
如果我删除它，那么文本会显示在导航栏部分的下方。谢谢！

标签： html css angular sticky-footer

【解决方案1】：

有几种方法可以实现这一点。我假设您已经尝试过其中一种：CSS-tricks - Sticky footer, five ways。

为此，您需要：

删除页脚和内容的绝对定位。
从正文中删除默认的顶部和底部边距。
如果您不使用 flexbox 或网格选项，则将除页脚之外的所有内容放在 one 元素内 （这样您就可以确保该元素的总高度加上页脚至少是视口的高度）。

Here 是您的 Angular2 应用程序的实现，带有粘性页脚。

粘性页脚是通过将所有主要内容包装在一个 div 中并使用calc() 将其最小高度设置为100vh 减去页脚高度来实现的。

【讨论】：

抱歉，我不希望页脚被固定但很粘。当有更多内容时，它应该放在页面下方。我会更新我的问题。
我接受了这个答案，尽管在我的真实应用中，一旦我删除position:absolute，导航栏部分就会被向下推，应用看起来很笨拙。猜猜看，因为实际应用程序中使用的 css 更多（网格等）

【解决方案2】：

我认为为您的 .main 块设置 position:absolute 不是一个好主意。页脚的绝对定位就足够了。试试这样的

html {
  height: 100%;
}

body {
  min-height: 100%;
  position: relative;
}

.main {
   min-height: 100%;
   padding-bottom: 55px;
}

#footer {
  position: absolute;
  bottom: 0;
}

同时从 .main 块样式中移除边距和 padding-top

【讨论】：

谢谢，但是如果我从 main 中删除绝对位置，那么文本会显示在导航栏部分下方。
什么文字？ .main 块文本。您可以从 .main 块中删除 margin-top 和 paddint-top
是的，删除它们后，主块文本的顶部会位于导航栏部分的下方。
您确定要删除 position:absolute for .main 块吗？我和你玩过，它对我有用。
是的，我刚刚从 .main css 样式中删除了 position:absolute 并且正文内容 "Display my router here" 位于标题下方。

【解决方案3】：

您仍然可以按照以下示例进行操作 https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

只需将此代码添加到styles.scss

html, 
body {
  height: 100%;
}

在你的app.component.scss

:host {
  display: flex;
  min-height: 100%; // used percent instead of vh due to safari bug.
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

在你的app.component.html

<header>...</header>

<main class="Site-content">..</main>

<footer>...</footer>

【讨论】：

谢谢，我很高兴它有帮助:)
我认为app.component.html应该是这样<app-header></app-header> <router-outlet></router-outlet> <app-footer></app-footer>你能更新答案来满足这种情况吗？
这是一种方法。但这与我已经提到的相同。您刚刚将页眉和页脚转换为组件。

【解决方案4】：

您只需编辑 2 个文件：

index.html:

 <!-- Full height body -->
    <body class="pt-3 h-100">
<!-- Full height app container, and also use flexbox columns -->
      <app-root class="d-flex flex-column h-100"></app-root>
    </body>

app.component.html：

<router-outlet></router-outlet>
<!-- Footer top margin must be set on auto -->
<app-footer class="mt-auto"></app-footer>

【讨论】：