Html Angular Material：如何使内容可滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29108922/
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
Angular Material : How to make content scrollable
提问by zero_coding
I am using angular material and want to design a layout for my application.
我正在使用有角度的材料并想为我的应用程序设计布局。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Angular Material - Starter App</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"/>
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,700'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.css"/>
<link rel="stylesheet" href="./style.css"/>
</head>
<body ng-app="starterApp" layout="column" layout-fill>
<div flex="30" style="border: 1px solid darkgrey;background-color: #1CA9F0;"></div>
<div flex style="border: 1px solid firebrick;" layout="column">
<div flex="5" layout="row" layout-align="center">
<md-toolbar flex="50">
<h2 class="md-toolbar-tools">
<span>Toolbar</span>
</h2>
</md-toolbar>
</div>
<div flex layout="row" layout-align="center">
<md-content flex="50">
Lorem ipsum dolor sit amet, ne quod novum mei. Sea omnium invenire mediocrem at, in lobortis conclusionemque nam. Ne deleniti appetere reprimique pro, inani labitur disputationi te sed. At vix sale omnesque, id pro labitur reformidans accommodare, cum labores honestatis eu. Nec quem lucilius in, eam praesent reformidans no. Sed laudem aliquam ne.
<p>
Facete delenit argumentum cum at. Pro rebum nostrum contentiones ad. Mel exerci tritani maiorum at, mea te audire phaedrum, mel et nibh aliquam. Malis causae equidem vel eu. Noster melius vis ea, duis alterum oporteat ea sea. Per cu vide munere fierent.
</p>
<p>
Ad sea dolor accusata consequuntur. Sit facete convenire reprehendunt et. Usu cu nonumy dissentiet, mei choro omnes fuisset ad. Te qui docendi accusam efficiantur, doming noster prodesset eam ei. In vel posse movet, ut convenire referrentur eum, ceteros singulis intellegam eu sit.
</p>
<p>
Sit saepe quaestio reprimique id, duo no congue nominati, cum id nobis facilisi. No est laoreet dissentias, idque consectetuer eam id. Clita possim assueverit cu his, solum virtute recteque et cum. Vel cu luptatum signiferumque, mel eu brute nostro senserit. Blandit euripidis consequat ex mei, atqui torquatos id cum, meliore luptatum ut usu. Cu zril perpetua gubergren pri. Accusamus rationibus instructior ei pro, eu nullam principes qui, reque justo omnes et quo.
</p>
<p>
Sint unum eam id. At sit fastidii theophrastus, mutat senserit repudiare et has. Atqui appareat repudiare ad nam, et ius alii incorrupte. Alii nullam libris his ei, meis aeterno at eum. Ne aeque tincidunt duo. In audire malorum mel, tamquam efficiantur has te.
</p>
<p>
Qui utamur tacimates quaestio ad, quod graece omnium ius ut. Pri ut vero debitis interpretaris, qui cu mentitum adipiscing disputationi. Voluptatum mediocritatem quo ut. Fabulas dolorem ei has, quem molestie persequeris et sit.
</p>
<p>
Est in vivendum comprehensam conclusionemque, alia cetero iriure no usu, te cibo deterruisset pro. Ludus epicurei quo id, ex cum iudicabit intellegebat. Ex modo deseruisse quo, mel noster menandri sententiae ea, duo et tritani malorum recteque. Nullam suscipit partiendo nec id, indoctum vulputate per ex. Et has enim habemus tibique. Cu latine electram cum, ridens propriae intellegat eu mea.
</p>
<p>
Duo at aliquid mnesarchum, nec ne impetus hendrerit. Ius id aeterno debitis atomorum, et sed feugait voluptua, brute tibique no vix. Eos modo esse ex, ei omittam imperdiet pro. Vel assum albucius incorrupte no. Vim viris prompta repudiare ne, vel ut viderer scripserit, dicant appetere argumentum mel ea. Eripuit feugait tincidunt pri ne, cu facilisi molestiae usu.
</p>
<p>
Qui utamur tacimates quaestio ad, quod graece omnium ius ut. Pri ut vero debitis interpretaris, qui cu mentitum adipiscing disputationi. Voluptatum mediocritatem quo ut. Fabulas dolorem ei has, quem molestie persequeris et sit.
</p>
<p>
Est in vivendum comprehensam conclusionemque, alia cetero iriure no usu, te cibo deterruisset pro. Ludus epicurei quo id, ex cum iudicabit intellegebat. Ex modo deseruisse quo, mel noster menandri sententiae ea, duo et tritani malorum recteque. Nullam suscipit partiendo nec id, indoctum vulputate per ex. Et has enim habemus tibique. Cu latine electram cum, ridens propriae intellegat eu mea.
</p>
</md-content>
</div>
</div>
<div flex="5" style="border: 1px solid turquoise;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-aria.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.js"></script>
<script type="text/javascript">
angular
.module('starterApp', ['ngMaterial'])
.run(function ($log) {
$log.debug("starterApp + ngMaterial running...");
});
</script>
</body>
</html>
My question is, how to make the md-content scrollable? The div on the bottom should be a sticky footer. Attention, on chrome looks works but on firefox not. I am trust firefox, because chrome has issue with flexbox.
我的问题是，如何使 md 内容可滚动？底部的 div 应该是粘性页脚。注意，在 chrome 上看起来有效，但在 Firefox 上无效。我相信 Firefox，因为 chrome 有 flexbox 的问题。
I've created a plunker, but I can't insert link into the thread, it appears always an error msg.
我创建了一个 plunker，但我无法将链接插入到线程中，它似乎总是一个错误消息。
回答by kuhnroyal
UPDATE
更新
This problem no longer appears with Angular-Material 1.1.1 - the original question was at the time of version 0.8.3
Angular-Material 1.1.1 不再出现此问题 - 最初的问题是在 0.8.3 版本时
ORIGINAL
原来的
Use md-content on the outer elements as well.
在外部元素上也使用 md-content 。
<body ng-app="starterApp" layout="column" layout-fill>
<div flex="30" style="border: 1px solid darkgrey;background-color: #1CA9F0;"></div>
<md-content flex style="border: 1px solid firebrick;" layout="column">
<div flex="5" layout="row" layout-align="center">
<md-toolbar flex="50">
<h2 class="md-toolbar-tools">
<span>Toolbar</span>
</h2>
</md-toolbar>
</div>
<md-content flex layout="row" layout-align="center">
<md-content flex="50">
...
</md-content>
</md-content>
</md-content>
<div flex="5" style="border: 1px solid turquoise;"></div>
...
</body>
[Plunkr] http://plnkr.co/edit/IfEtX638z4ymccC0Ua53?p=preview
[Plunkr] http://plnkr.co/edit/IfEtX638z4ymccC0Ua53?p=preview
回答by Hugo Nakamura
try adding style="overflow: scroll;"to the tag you wish to be scrollable.
尝试添加style="overflow: scroll;"到您希望可滚动的标签。
For example I have in mine:
例如我在我的：
<div layout="column" flex style="overflow: scroll;">
<div id="content" ng-view flex></div>
</div>
回答by flowr
It's not enough to set overflow: scroll.
设置 是不够的overflow: scroll。
You need to add position: absoluteand to set a size of your container that need to be scrollable. Try something like this:
您需要添加position: absolute并设置需要可滚动的容器大小。尝试这样的事情：
md-content{
position: absolute;
height: 100px;
}
For more information of scrolling containers read this answer
有关滚动容器的更多信息，请阅读此答案
Thanks.
谢谢。
回答by Oscar Caicedo
I solve this problem (angular material 0.11.0)
我解决了这个问题（角材料 0.11.0）
index.html
索引.html
<body ng-app="app" layout="column" >
<div flex layout="column" ng-include="'app/layout/shell.html'" ></div>
<body>
shell.html
外壳.html
<div layout="row" flex style="overflow: hidden;" ng-controller="Shell" layout-fill>
<div ng-include="'app/layout/left-side-nav.html'"></div>
<md-content flex layout="column" role="main" class="fondo" style="height: inherit">
<div ng-include="'app/layout/app-toolbar.html'"></div>
<md-content flex style="background-color: transparent; flex-direction: column;" ng-hide="dataLoading.init">
<div ui-view style="background-color: transparent"></div>
</md-content>
</md-content>
<div ng-include="'app/layout/right-side-nav.html'"></div>
</div>
回答by Shachi
What worked for me was as follows. An easy wayis,
对我有用的是如下。一个简单的方法是
<div style="left:0;
top: 0;
overflow: auto;
min-height:auto;
max-height:100%;
height:300px;">
Or add it as external css.
或者将其添加为外部 css。
The trick is of overflow. If the data on page overflows, it will automatically become scrollable.
诀窍是溢出。如果页面上的数据溢出，它将自动变为可滚动。
Also it will only make the data scrollable that will be in the div as shown below.
此外，它只会使 div 中的数据可滚动，如下所示。
回答by Lucas Santos
To make the md-content scrollable, add the md-scroll-y attribute, like this:
要使 md-content 可滚动，请添加 md-scroll-y 属性，如下所示：
<md-content md-scroll-y>
</md-content>
