angularjs – 如何实现经典的“粘脚”角材料？

发布时间：2020-12-17 08:27:16 所属栏目：安全来源：网络整理

导读：我认识到 Angular Material实现是一个正在进行的工作，但我今天上午花了一些时间来熟悉它。但是，我真的很难得到在演示中显示的概念在一个独立的网站工作。看起来当像 md-toolbar和 md-content在具有固定高度的容器中使用，那么它们工作得很好。我努力与如

我认识到 Angular Material实现是一个正在进行的工作，但我今天上午花了一些时间来熟悉它。但是，我真的很难得到在演示中显示的概念在一个独立的网站工作。

看起来当像< md-toolbar>和< md-content>在具有固定高度的容器中使用，那么它们工作得很好。我努力与如何将他们扔在一个< body标签，并能够有一个粘性页脚布局like in this example。

我试过很多变化，但是这里有一个例子，当内容从DOM中删除时不工作。当内容存在时，它会超出视口，页脚会放置在后面，就像你所期望的那样。在最新版本的Chrome和Firefox中，此示例会在删除内容时将页脚保留在底部，但在IE中，这根本不起作用。在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古茹，但它感觉像这应该很容易做的角度材料的布局选项，所以我希望我真的错过了明显的这里。

你可以得到这个工作与一个小的解决方法。

> use min-height：calc(100vh – 176px)on your main element，(176px = 2 * 88px for the md-toolbars)
>从根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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!