Angular 2粘性頁腳阻礙

我想讓我的頁腳成爲粘性頁腳，並嘗試遵循CSS技巧負邊距技巧，但沒有奏效。我試圖在下面的plunker代碼中模擬我的angular2應用程序。我希望標籤不要固定，而要粘貼，並在主要部分有更多可用內容時進入底部。注意頁腳顯示在主要部分的數據上方。Angular 2粘性頁腳阻礙

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>

任何幫助固定和移動頁腳下來表示讚賞。

來源

2017-02-28 John Jai

不能完全確定你的目標是去除邊距和填充頂，但你的樣式類「主」有絕對的位置。 –

如果我刪除它，那麼文本顯示在導航欄部分下方。謝謝！ –

有幾種方法可以實現這一點。我假設你已經嘗試過其中的一種：CSS-tricks - Sticky footer, five ways。

對於工作，你將需要：

刪除頁腳和內容的絕對定位。
刪除身體的默認頂部和底部邊距。
如果不打算使用flexbox或grid選項，請將除footer以外的所有內容放在之內 element （因此，您可以確保該元素加上頁腳的總高度至少爲視口）。

Here是您的Angular2應用程序的一個粘滯頁腳的實現。

粘性頁腳是通過將所有主要內容包裝在一個div中並使用calc()將其最小高度設置爲100vh減去頁腳高度來實現的。

來源

2017-02-28 23:06:30

對不起，但我不希望腳註固定，但粘性。當有更多的內容時，它應該放在頁面上。我會更新我的問題。 –

明白了。我更新了我的答案。 –

我接受這個答案，雖然在我的真實應用程序中，一旦我刪除了'position：absolute'，導航欄部分就會被推下來，應用程序看起來很笨拙。猜測，因爲有更多的真正的應用程序中使用的CSS（網格等） –

我認爲這是不是一個好主意，使您的.main塊的位置：絕對。絕對定位你的頁腳就足夠了。嘗試是這樣的

html { 
 
    height: 100%; 
 
} 
 

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

 
.main { 
 
    min-height: 100%; 
 
    padding-bottom: 55px; 
 
} 
 

 
#footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
}

而且從。主要塊樣式

來源

2017-02-28 23:26:59 disstruct

謝謝，但如果我從主要刪除絕對位置，然後文本顯示在導航欄部分下方。 –

什麼文字？ .main阻止文本。您可以從.main塊 – disstruct

中刪除頁邊距和paddint頁頂。是的，刪除它們後，主塊文本的頂部將位於導航欄部分的下方。 –

Angular 2粘性頁腳阻礙

回答

相關問題