Question

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

'app'组件的结构如下：

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

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

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

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;
}

结果糟糕：

有趣的是，如果我在检查员中关闭页脚的位置，然后再次打开，页脚就会变好：

解：

 <asp:DataList
        id="datalistleads"

        RepeatColumns="1"
        GridLines="Both"
        Runat="server" BackColor="#D9EDF7" Width="333px">
        <ItemTemplate>
             <a href="Leads1.aspx?company=<%# Eval("CompanyName") %>&Contactperson=<%# Eval("CompanyName") %>">     <br />

        Contact Person:
        <%#Eval("ContactPerson") %>
        <br />
      </a>

        </ItemTemplate>
    </asp:DataList>

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

Answer 2

您提供的链接实际上是如何完成您所要求的声音的一个很好的例子。我尝试使用你提到的元素和下面的必要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;
}

Answer 3

参见示例：Link

添加CSS：

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

Answer 4

回复“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 -->

Answer 5

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

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;
}

Answer 6

我尝试了针对Angular8的建议解决方案，但该方法无效。出于某种原因，请考虑一下由于引导问题，该样式不适用于“ app”标签。因此，我为“ app id ='main-app'”分配了一个ID，并更改了#ID要应用的样式。有效。

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

Angular 2底部粘滞的页脚

6 个答案: