Angular 2中底部粘性頁腳

我在Angular 2中構建項目，我需要一個粘性頁腳，它總是必須位於頁面底部，而不是固定的。例如：http://codepen.io/chriscoyier/pen/uwJjr Angular 2中底部粘性頁腳

「應用」成分的結構是這樣的：

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

也許，問題不與角本身連接，但只有CSS。不過，我試圖實現這樣的：

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

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

結果是可怕的：

有趣的是，如果我關掉在檢查員頁腳的位置，然後重新打開，頁腳變成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; 
}

來源

2016-02-12 Nursultan Bagidolla

有這方面的任何soluting？我面臨同樣的問題 –

的任何迴應。我需要幫助烏爾感謝 –

你這麼多張貼SOLUTION <3 <3 – Cacoon

參見示例：Link

添加CSS：

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

來源

2016-02-12 05:58:13

您所提供的鏈接實際上是如何完成這聽起來像你問了一個很好的例子。我試着用下面提到的必要的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; 
}

來源

2016-02-12 06:21:13

「尾」在「應用」標籤：

–

置頂頁腳一直相當棘手。它們嚴重依賴於爲一個元素設置正確的HTML佈局，以至少填充頁面的整個高度，然後將頁腳拉回到視口中（使用負邊界底部）。在不改變HTML的情況下，我唯一能想到做這項工作的其他方式是編寫JavaScript，它可以在頁面加載時以及每次調整窗口大小時設置元素的高度。我個人比較喜歡使用HTML/CSS來處理粘滯頁腳。 –

該怎麼解決粘頁腳（不固定）

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

來源

2016-12-02 03:11:20 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 -->

來源

2017-10-31 09:19:32

Angular 2中底部粘性頁腳

回答

相關問題