如何用角材料实现经典的“粘性页脚”？
Posted
技术标签:
【中文标题】如何用角材料实现经典的“粘性页脚”？【英文标题】：How to implement the classic "sticky footer" with angular-material? 【发布时间】：2015-01-21 07:18:39 【问题描述】：我知道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>
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 专家，但感觉使用 angular-material 中的布局选项应该很容易做到这一点，所以我希望我真的错过了一些明显的东西。
【问题讨论】：
除了使用底纸之外，您找到解决方案了吗？ 不，还没有一个可靠的工作。 只是想跟进我之前的评论，以防有人看到这个。接受的答案确实有效，虽然我希望我不需要在 CSS 中包含确切的像素高度，但它提供了我正在寻找的内容。 【参考方案1】：我没有发现任何答案都能在浏览器中可靠地工作而没有任何缺陷。
正如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 的例子。
【讨论】：
希望我能投票更多！就像您说的那样，许多其他解决方案在一个或另一个浏览器中都有微妙的问题。我在 IE 中遇到的问题非常令人沮丧：codepen.io/ariscol/pen/rwwXWO【参考方案2】：不需要底片或类似的东西。 利用 flexbox 行为，一切顺利：
-
在主包装器上使用
layout="column" 和layout-fill 属性（可以是body 标记）。
创建您的部分：header、main 和 footer。
在您的main 上使用flex 属性。
查看我的示例，基于@kuhnroyal pen。
Code | Full Page
【讨论】：
太糟糕了，这不再适用于 Angular Material 版本 1.0.0-rc4。 适用于 1.0.3 - 虽然我不需要“主包装器”上的“布局填充” 它停止在 angular-material@1.1.1 上工作。 works v0.8.3 | broken v1.1.1
我找到了这个***.com/questions/34720648/… 并将它合并到这个codepen...Working v1.1.1【参考方案3】：
您可以通过一个小变通方法来解决这个问题。
在main 元素上使用 min-height: calc(100vh - 176px)，（md 工具栏为 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
【讨论】：
【参考方案4】：所以我只是在尝试角度材料，但我为此所做的是
<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 上使用了 overflow-y: auto 它可能会起作用（我的应用程序构建的还不够多，无法测试）
【讨论】：
md-bottom-sheet 的意图是根据应用程序的状态提供上下文操作吗？以上是关于如何用角材料实现经典的“粘性页脚”？的主要内容，如果未能解决你的问题，请参考以下文章