Question

我希望我的页脚成为一个粘性页脚，并尝试遵循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>

任何有助于修复和移动页脚的帮助都是值得赞赏的。

Answer 1

有几种方法可以实现这一目标。我假设您尝试了以下其中一项：CSS-tricks - Sticky footer, five ways。

要实现这一目标，您需要：

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

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

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

Answer 2

您仍然可以遵循以下提到的示例 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>

Answer 3

我认为为你的.main块做位置绝对不是一个好主意。页脚的绝对定位就足够了。试试这样的事情

html {
  height: 100%;
}

body {
  min-height: 100%;
  position: relative;
}

.main {
   min-height: 100%;
   padding-bottom: 55px;
}

#footer {
  position: absolute;
  bottom: 0;
}

同时从.main块样式

中删除边距和填充顶部

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

Angular 2粘性页脚强制

4 个答案: