web-dev-qa-db-ja.com

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

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

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

現在、フッターはメインコンテンツの直後に表示されています。メインのサイズに応じて、画面の中央のどこかに表示されるフッターか、ページの高さより下に移動します。

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

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

htmlcssangularjsmaterial-designangular-material
10
Devesh Agrawal

<main flex>とcss overflow-y: auto;を追加するだけです。このプランカーを参照してください： http://plnkr.co/edit/GQjcrqhwB2T5ohZwC5EL?p=preview

11
Captain