web-dev-qa-db-ja.com

角材で古典的な「スティッキーフッター」を実装する方法は？

Angular Material の実装は進行中の作業であることを認識していますが、今朝はそれに慣れるために時間を費やしました。ただし、デモに示されている概念をスタンドアロンのサイトで機能させるには本当に苦労しています。

<md-toolbar>や<md-content>のようなディレクティブが、高さが固定されたコンテナで使用されている場合、うまく機能しているようです。 <bodyタグ内にそれらをスローし、スティッキーフッターレイアウトを持つことができるように苦労しています この例のように 。

多くのバリエーションを試しましたが、コンテンツがDOMから削除されたときに機能しない1つの例を次に示します。コンテンツがそこにあるとき、それはビューポートを超えて成長し、フッターはその後期待どおりに配置されます。 ChromeとFirefoxの最新バージョンでは、この例はコンテンツが削除されたときにフッターを下部に保持しますが、IE In。IEメインコンテンツが表示されているかどうかに関係なく、フッターはヘッダーのすぐ下にフロートします。

デモ：http://codepen.io/sstorie/pen/xbGgqb

<body ng-app="materialApp" layou-fill layout='column'>
    <div ng-controller="AppCtrl" layout='column' flex>
      <md-toolbar class='md-medium-tall'>
        <div class="md-toolbar-tools">
          <span>Fixed to Top</span>
          <span flex></span>
          <md-button class="md-raised" ng-click="toggleContent(!displayContent)">toggle content</md-button>
        </div>
      </md-toolbar>
      <main class='md-padding' layout="row" flex>
        <div flex>
        <md-card ng-if="displayContent" ng-repeat = "card in cards">
          {{$index}}
          {{card.title}}
          {{card.text}}
        </md-card>
        </div>
               <div flex>
        <md-card ng-if="displayContent" ng-repeat = "card in cards">
          {{$index}}
          {{card.title}}
          {{card.text}}
        </md-card>
        </div>
      </main>
      <md-toolbar class="md-medium-tall">
        <div layout="row" layout-align="center center" flex>
          <span>FOOTER</span>
        </div>
      </md-toolbar>
    </div>
  </body>

Javascript：

angular.module('materialApp', ['ngMaterial'])

.controller('AppCtrl', function($scope) {
    $scope.cards = [
    {text: 'Bla bla bla bla bla bla bla ',
     title: 'Bla' },
    ...repeat 10 times...
  ];

    $scope.displayContent = true;

    $scope.toggleContent = function(showContent) { $scope.displayContent = showContent; };
});

CSS：

body {
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

私は間違いなくCSSの第一人者ではありませんが、アンギュラーマテリアルのレイアウトオプションでこれを行うのは簡単だと思うので、ここで明らかな何かが本当に欠けていることを望んでいます。

angularjsmaterial-designangular-material
29
Sam Storie

これを小さな回避策で動作させることができます。

  • main要素でmin-height: calc(100vh - 176px)を使用します（mdツールバーの場合は176px = 2 * 88px）
  • ルートdivからlayout='column'を削除します
  • layout-fill layout='column'を本文から削除します

IE10がCodepenでその量のCSS/JSでクラッシュするため、マテリアルcss/jsをCDNバージョン0.8.3に置き換えました。

これをChrome、Firefox、IE10でテストしました-うまくいくようです。

http://codepen.io/anon/pen/azgdOZ

21
kuhnroyal

ボトムシートなどの必要はありません。 flexboxの振る舞いを活用すれば、準備完了です：

  1. つかいます layout="column"およびlayout-fillメインラッパーの属性（bodyタグにすることができます）。
  2. セクションを作成します：header、main、およびfooter。
  3. flexでmain属性を使用します。

@kuhnroyalペンに基づく私の例を確認してください。

コード | フルページ

24
Ravan Scafi

だから私は角のある素材で実験していますが、これのためにやったことは

<div layout="column" layout-fill>
   <md-toolbar class="md-default-theme">
   <!-- your stuff -->
   </md-toolbar>
   <md-content layout-fill role="main">
      <!-- your main areas -->
   </md-content>
   <md-bottom-sheet>
      <div>I am a sticky footer</div>
   </md-bottom-sheet>
</div>

私はこれが彼らが望むようにすべてを行うかどうかを確実に知るのに十分な実験をしていませんが、今のところは有望に見えます。コンテンツに制約がない場合は、ボトムシートを押し下げ続ける可能性が高いことに注意してください。 overflow-y：md-contentでautoを使用した場合、動作する可能性があります（テストするためにビルドしたアプリがまだ十分ではありません）

7
jadrake

いずれの欠陥もなしに、ブラウザー間で確実に答えが機能することはありませんでした。

これで指摘されているように SO answer 、これは動作します：

<md-toolbar></md-toolbar>
<md-content flex layout="column">
    <div layout="column" flex>
        <main flex="none"></main>
        <div flex></div>
        <footer flex="none"></footer>
    </div>
<md-content>

この例では codepen です。

5
creimers