Html 如何在angularjs材料设计中创建固定页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35814455/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a fixed footer in angularjs material design
提问by Devesh Agrawal
This is my page layout.
这是我的页面布局。
<div layout="column" layout-fill ng-controller="MainCtrl as mc">
<header>
<md-toolbar md-scroll-shrink>
<div layout="row" layout-align="center center" flex>
HEADER INFO
</div>
</md-toolbar>
</header>
<main>
<div ui-view>
</div>
</main>
<footer>
<md-toolbar class="md-scroll-shrink">
<div layout="row" layout-align="center center" flex>
FOOTER INFO
</div>
</md-toolbar>
</footer>
</div>
Currently footer is displaying just after main contents. depending upon the size of main either footer displaying somewhere middle of screen or goes below page height.
当前页脚显示在主要内容之后。取决于主要页脚的大小，显示在屏幕中间的某个位置或低于页面高度。
I want footer to be fixed always bottom of screen. and depending on the size of main, there should be a scroll in main content.
我希望页脚总是固定在屏幕底部。并且根据主要内容的大小，主要内容中应该有一个滚动条。
can anyone help me on this?
谁可以帮我这个事？
回答by Captain
You just need to add <main flex>and css overflow-y: auto;. See this plunker: http://plnkr.co/edit/GQjcrqhwB2T5ohZwC5EL?p=preview
你只需要添加<main flex>和 css overflow-y: auto;。看到这个plunker：http://plnkr.co/edit/GQjcrqhwB2T5ohZwC5EL?p=preview
回答by pmkent
Place a mat-toolbar at the bottom of the page and use the following CSS spacer to center the text like this.:
在页面底部放置一个 mat-toolbar 并使用以下 CSS 分隔符将文本居中，如下所示：
<mat-toolbar color='primary'>
<span class='spacer'></span>
<h3>? Copyright Angular Apps 2017.</h3>
<span class='spacer'></span>
</mat-toolbar>
Using this CSS:
使用这个 CSS：
.spacer {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
To get this:
要得到这个：
