Angular 2底部的粘性页脚答案

【问题标题】：Sticky footer at the bottom in Angular 2Angular 2底部的粘性页脚
【发布时间】：2016-02-12 05:48:23
【问题描述】：

我正在使用 Angular 2 构建一个项目，我需要一个粘性页脚，它必须始终位于页面底部，而不是固定的。示例：http://codepen.io/chriscoyier/pen/uwJjr

'app'组件的结构是这样的：

<header-main></header-main>
<router-outlet></router-outlet>
<footer>...</footer>

可能问题与 Angular 本身无关，而仅与 CSS 有关。但是，我尝试这样实现它：

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

footer {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 271px;
}

结果很糟糕：

有趣的是，如果我在检查器中关闭页脚位置，然后再次打开，页脚就可以了：

解决方案：

app {
  min-height: 100%;
  width: 100%;
  margin-bottom: -271px;
  display: table;
}

header-main,
router-outlet,
footer{
  display: table-row;
}

header-main {
 height: 60px;
}

router-outlet {
  position: absolute;
}

footer {
  height: 271px;
}

【问题讨论】：

对此有什么解决办法吗？我面临同样的问题
任何回应。我需要你的帮助
非常感谢您发布解决方案
min-height: 100%; 对我有用，我使用的是height: 100%

标签： html css angularjs

【解决方案1】：

这是我解决粘页脚的方法（未修复）

app.component.ts
.....
export class AppComponent {  
   clientHeight: number;

 constructor() {
    this.clientHeight = window.innerHeight; 
 }
 }

app.component.html

<div [ngStyle]="{'min-height': clientHeight + 'px', 'margin-bottom': '-200px'}"> 
          <!-- 'margin-bootom': '-FooterHeight' -->
    <app-navbar></app-navbar> 
          <!-- Your Navbar here -->
    <router-outlet></router-outlet>
    <div style="height: 200px"></div> 
          <!-- 200px is FooterHeight  this will push 
          the footer so it will not overlap if you have very long content  -->
</div>

<app-footer></app-footer> 
<!-- Your footer here -->

【讨论】：

【解决方案2】：

这是我第一次在这里写：D 我目前正在学习 Angular 7，我遇到了同样的问题...... 所以我创建了自己的解决方案（可能不是最好的，但我认为它可以帮助一些人1）。

HTML：

<div class="main-root">
    <header></header>
    <router-outlet></router-outlet>
    <footer></footer>
</div>

CSS：

html,
body {
    height: 100%;
    margin: 0;
}

.main-root {
    height: 100%;
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto;
}

【讨论】：

【解决方案3】：

您提供的链接实际上是一个很好的例子，说明了如何完成听起来像您要求的事情。我已尝试将您提到的元素与下面必要的 CSS 一起使用。

Here's a working example.

<div class="app">
    <header>
        Header here
    </header>
    Content isn't long enough to push footer to the bottom.
</div>
<footer>
    This is the footer
</footer>

html, body {
    /* make sure the body does not have a margin */
    margin: 0;
    /* this forces the body tag to fill the height of the window */
    height: 100%;
}
.app {
    /* the .app div needs to be AT LEAST 100% of the height of the window */
    min-height: 100%;
    /* now that it is 100% the height, we 'pull' the footer up */
    /* margin-bottom must be the same height as the footer height below */
    margin-bottom: -271px; 
}
footer{
    /* .set the height of the footer */
    height: 271px;
    /* just setting a color so you can see the footer */
    background: orange; 
}

/* the following is not necessary, just showing how a header could be added */
header{
    height: 30px;
    background: teal;
}

【讨论】：

'footer' 在 'app' 标签内：
粘性页脚一直很棘手。他们严重依赖为一个元素设置正确的 HTML 布局，以至少填满页面的整个高度，然后将页脚拉回视口（使用负边距底部）。在不更改 HTML 的情况下，我能想到的唯一另一种方法是编写 JavaScript 来设置页面加载时元素的高度以及任何时候调整窗口大小。我个人更倾向于使用 HTML/CSS 而不是 JavaScript 作为粘性页脚。

【解决方案4】：

参见示例：Link

添加 CSS：

.page-wrap{position: relative;}
#add{position: absolute; bottom: 160px;}

【讨论】：

【解决方案5】：

回复“phen”答案。您可以更动态地支持多设备（当页脚高度发生变化时）：

app.component.ts
.....
export class AppComponent implements AfterViewInit {  
   clientHeight: number;
   footerHeight:umber;
   @ViewChild('footer') footerDiv: ElementRef;

 constructor() {
    this.clientHeight = window.innerHeight; 
 }
 ngAfterViewInit() {
    this.footerHeight=this.footerDiv.nativeElement.offsetHeight; 
 }
 }

app.component.html

<div [ngStyle]="{'min-height': clientHeight-footerHeight + 'px'}"> 
    <app-navbar></app-navbar> 
          <!-- Your Navbar here -->
    <router-outlet></router-outlet>
</div>

<app-footer #footer></app-footer> 
<!-- Your footer here -->

【讨论】：

【解决方案6】：

我尝试了针对 Angular8 提出的解决方案，但没有成功。出于某种原因，认为由于引导，样式不适用于“app”标签。因此，我为“app id='main-app'”分配了一个 ID，并更改了 #ID 应用的样式。它奏效了。

#main-app {
 display: flex;
 flex-direction: column;
 min-height: 100%;
}

【讨论】：