如何用角形材料实现经典的“粘性页脚”?

时间:2014-11-23 14:56:56

标签: angularjs material-design angular-material

我认识到Angular Material实施正在进行中,但我今天早上花了一些时间试图熟悉它。但是,我真的很难让演示中显示的概念在一个独立的站点中工作。

似乎当<md-toolbar><md-content>等指令用于具有固定高度的容器时,它们的效果很好。我正在努力将它们放在<body标记内,并且能够使用粘性页脚布局like in this example

我尝试了很多变体,但是这个例子在从DOM中删除内容时不起作用。当内容在那里时,它会超出视口,而页脚会像你期望的那样被放置。在最新版本的Chrome和Firefox中,此示例在删除内容时将页脚保持在底部,但在IE中这根本不起作用。在IE中,无论主要内容是否显示,页脚都会浮动在标题下方。

DEMO: 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大师,但感觉这应该很容易用角度材质的布局选项,所以我希望我真的错过了一些明显的东西。

4 个答案:

答案 0 :(得分:24)

不需要底页或类似的东西。 利用弹性箱行为,你很高兴:

  1. 在主包装上使用layout="column"layout-fill属性(可以是您的body代码。)
  2. 创建您的部分:headermainfooter
  3. flex上使用main属性。
  4. 根据@kuhnroyal pen检查我的例子。

    Code | Full Page

答案 1 :(得分:21)

您可以通过一个小的解决方法来实现此目的。

  • min-height: calc(100vh - 176px)元素上使用main,(对于md-toolbars,176px = 2 * 88px)
  • 从根div
  • 中删除layout='column'
  • 从正文中移除layout-fill layout='column'

我用CDN版本0.8.3替换了材料css / js,因为我的IE10会因Codepen中的那些CSS / JS而崩溃。

我在Chrome,Firefox和IE10上对此进行了测试 - 似乎有效。

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

答案 2 :(得分:7)

所以我只是用角质材料进行体验,但我为此做的是

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

我没有足够的实验来确定这是否能按照我想要的方式做到,但到目前为止看起来很有希望。请注意,如果您的内容不受限制,则可能会不断推动底部内容。如果你在md-content上使用了溢出-y:auto它可能会起作用(我还没有足够的应用程序构建它来测试)

答案 3 :(得分:5)

我没有发现任何答案在浏览器中可靠地运行而没有任何缺陷或其他缺陷。

正如本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示例。