我认识到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大师,但感觉这应该很容易用角度材质的布局选项,所以我希望我真的错过了一些明显的东西。
答案 0 :(得分:24)
不需要底页或类似的东西。 利用弹性箱行为,你很高兴:
答案 1 :(得分:21)
您可以通过一个小的解决方法来实现此目的。
min-height: calc(100vh - 176px)
元素上使用main
,(对于md-toolbars,176px = 2 * 88px)layout='column'
layout-fill layout='column'
我用CDN版本0.8.3替换了材料css / js,因为我的IE10会因Codepen中的那些CSS / JS而崩溃。
我在Chrome,Firefox和IE10上对此进行了测试 - 似乎有效。
答案 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)