角2 +材質2：帶有md工具欄的粘滯頁腳

我實際上嘗試在md-toolbar組件中的angular2/Material2應用程序中創建粘性頁腳。角2 +材質2：帶有md工具欄的粘滯頁腳

也許這不是一個合適的元素，但是這樣做會很好，因爲它適合沒有額外代碼的應用程序樣式。

我使用角2（CLI），材料2（https://github.com/angular/material2）和Flex佈局（https://github.com/angular/flex-layout）

這裏是什麼樣的應用程序看起來像一個示例代碼：

<md-sidenav-container class="sd-layout"> 
    <md-sidenav #sidenav class="app-sidenav" mode="push"> 
     //My links in the sidenav 
    </md-sidenav> 
    <md-toolbar color="primary"> 
     //Here is the "REAL" toolbar, on top of page, with app name, and so on 
    </md-toolbar> 
    <router-outlet> 
     //Here is the application display, routing, navigation, security, all the magic happens here 
    </router-outlet> 
    <my-footer> 
     //Here is the custom footer I tried to make... 
    </my-footer> 
</md-sidenav-container>

所以，基本上，沒有什麼奇怪的這段代碼... 現在，頁腳模板項目：

<md-toolbar class="footer"> 
    //Here is my footer 
</md-toolbar>

CSS「頁腳」類持有這樣的：

.footer { 
    position:relative; 
    right:0; 
    left:0; 
    bottom:0; 
}

再一次沒什麼魔術......此時，頁腳直接出現在路由器插座下。不錯，但還不夠：如果路由器出口是空的或不夠適合頁面（設備高度）高，那麼它的葉子下一個空的空間，所以我們得到了這樣的顯示：

我想獲得的結果是：

感謝您的閱讀/幫助

來源

2017-02-20 Julo0sS

使用'位置：如果你想讓它始終可見fixed'，使用'位置：absolute'如果你希望它是在所有內容的底部。如果不需要其他內容，則必須在主體的底部添加「padding-bottom」高度。有這麼多的騙局 –

我試過這個。固定不適合，我不需要它始終可見。絕對應該適合，但它不起作用。可能是因爲md-toolbar默認行爲......：/ – Julo0sS

可能的[如何讓頁腳停留在網頁底部？]（http://stackoverflow.com/questions/42294/how-做任您得到最頁腳到待在最底的-A-網頁） –

您可以使用此： https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

<div class="maindiv"> 
<md-toolbar>your toolbar</md-toolbar> 
<md-sidenav-container>your menu</md-sidenav-container> 

    <div class="site"> 
     <div class="content"> 
     <router-outlet></router-outlet> 
     </div> 
     <footer> 
      <p>footer</p> 
     </footer> 
    </div> 
</div>

末CSS：

.maindiv { 
    min-height: 100vh; 
} 

.site{ 
    display: flex; 
    flex-direction: column; 
    min-height: 94vh; 
} 

.content{ 
    flex: 1; 
}

來源

2017-09-12 11:32:25 xeofus

爲了在底部總是設置頁腳，你可以試試下面的代碼

<mat-sidenav-container class="container"> 
<mat-sidenav mode="side" opened>Sidenav content</mat-sidenav> 
<mat-sidenav-content> 
    <div fxLayout="column" style="height:100vh;"> 
     <div fxFlex>content goes here</div> 
     <div fxFlex="50px" fxLayoutAlign="center center" class="footer">footer</div> 
    </div> 
</mat-sidenav-content>

在這裏，我已經創建使用演示角度材料和彈性佈局

https://github.com/Ravi-Rajpurohit/mat-sideNav-stickyFooter

，並看看我的git回購

https://github.com/Ravi-Rajpurohit/mat-sideNav-stickyFooter

來源

2018-02-23 13:30:10