anglejsマテリアルデザインで固定フッターを作成する方法

Question

これは私のページレイアウトです。

<div layout="column" layout-fill ng-controller="MainCtrl as mc"> 
     <header> 

     <md-toolbar md-scroll-shrink> 
      <div layout="row" layout-align="center center" flex> 
      HEADER INFO 
      </div> 
     </md-toolbar> 

     </header> 

     <main> 
     <div ui-view> 
     </div> 
     </main> 

     <footer> 
     <md-toolbar class="md-scroll-shrink"> 
      <div layout="row" layout-align="center center" flex> 
      FOOTER INFO 
      </div> 
     </md-toolbar> 
     </footer> 

    </div> 

現在、フッターはメインコンテンツの直後に表示されています。いずれかのフッタが画面の途中に表示されているか、ページの高さを下回っているかによって、メインのサイズに依存します。

フッターは常に画面の下に固定します。メインのサイズに応じて、メインコンテンツにスクロールが必要です。

誰でも私にこれを助けることができますか？

Answer 1

<main flex>とcss overflow-y: auto;を追加するだけです。 http://plnkr.co/edit/GQjcrqhwB2T5ohZwC5EL?p=preview

Answer 2

プレイスページの下部にあるマット・ツールバーをし、このようなテキストを中央揃えするには、以下のCSSのスペーサーを使用する：

<mat-toolbar color='primary'> 
    <span class='spacer'></span> 
    <h3>© Copyright Angular Apps 2017.</h3> 
    <span class='spacer'></span> 
</mat-toolbar> 

このCSSを使用する：このplunkerをすべて見る

.spacer { 
    -webkit-box-flex: 1; 
    -ms-flex: 1 1 auto; 
    flex: 1 1 auto; 
} 

は、これを取得するには、次の