Html Angular 2 底部的粘性页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35355652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sticky footer at the bottom in Angular 2
提问by Nursultan Bagidolla
I'm building a project in Angular 2, and I need a sticky footer which always must be at the bottom of the page, not fixed. Example: http://codepen.io/chriscoyier/pen/uwJjr
我正在 Angular 2 中构建一个项目，我需要一个粘性页脚，它必须始终位于页面底部，而不是固定的。示例：http: //codepen.io/chriscoyier/pen/uwJjr
The structure of 'app' component is like this:
'app' 组件的结构是这样的：
<header-main></header-main>
<router-outlet></router-outlet>
<footer>...</footer>
Probably, the problem is not connected with Angular itself, but with only CSS. However, I tried implementing it like this:
可能问题与 Angular 本身无关，而仅与 CSS 相关。但是，我尝试像这样实现它：
app {
min-height: 100%;
position: relative;
}
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 271px;
}
The result is awful:
结果很糟糕：
The interesting thing is that if I turn off a position of footer in inspector, and turn on again, the footer becomes OK:
有趣的是，如果我在检查器中关闭页脚的位置，然后再次打开，页脚就可以了：
SOLUTION:
解决方案：
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;
}
回答by phen
This how I solve sticky footer (not fixed)
这是我解决粘性页脚的方法（未修复）
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 -->
回答by Russell Stout
The link you provided is actually a great example of how to accomplish what it sounds like you're asking for. I've tried to use the elements you mentioned with the necessary CSS below.
您提供的链接实际上是一个很好的示例，说明如何完成您所要求的事情。我尝试将您提到的元素与下面必要的 CSS 一起使用。
<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;
}
回答by m0rem0ney
this is the first time I write here :D I'm currently learning angular 7 and I had the same problem... So I created my own solution (probably not the best but I think it can help some1).
这是我第一次在这里写作 :D 我目前正在学习 angular 7 并且我遇到了同样的问题......所以我创建了自己的解决方案（可能不是最好的，但我认为它可以帮助一些人1）。
HTML:
HTML：
<div class="main-root">
<header></header>
<router-outlet></router-outlet>
<footer></footer>
</div>
CSS:
CSS：
html,
body {
height: 100%;
margin: 0;
}
.main-root {
height: 100%;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
回答by mdreds
I tried the proposed solution for Angular8 and it didn't work. For some reason, think because of bootstrapping, the style is not applied for "app" tag. So, I assigned an ID to the "app id='main-app'" and changed the style to be applied by #ID. It worked.
我尝试了为 Angular8 提出的解决方案，但没有奏效。出于某种原因，认为由于引导，样式不适用于“app”标签。因此，我为“app id='main-app'”分配了一个 ID，并更改了 #ID 应用的样式。有效。
#main-app {
display: flex;
flex-direction: column;
min-height: 100%;
}
回答by vahid mehrjooei
reply to "phen" answer. you can do It some more dynamic to support multi device (when footer height change):
回复“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 -->