Angular Material：如何使内容可滚动

本文介绍了Angular Material：如何使内容可滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用角度材质，并希望为我的应用程序设计一个布局。

 <！DOCTYPE html> 
< html lang =en> 
< head> 
< title> Angular Material  -  Starter App< / title> 
< meta charset =utf-8> 
< meta http-equiv =X-UA-Compatiblecontent =IE = edge> 
< meta name =descriptioncontent => 
< meta name =viewportcontent =initial-scale = 1，maximum-scale = 1，user-scalable = no/> 
 
< link rel ='stylesheet'href ='http：//fonts.googleapis.com/css？family = Roboto：400,700'> 
< link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.css/> 
< link rel =stylesheethref =./ style.css/> 
 
< / head> 
 
< body ng-app =starterApplayout =columnlayout-fill> 
 
< div flex =30style =border：1px solid darkgrey; background-color：＃1CA9F0;>< / div> 
< div flex style =border：1px solid firebrick;布局= 柱 > 
< div flex =5layout =rowlayout-align =center> 
< md-toolbar flex =50> 
< h2 class =md-toolbar-tools> 
< span>工具栏< / span> 
< / h2> 
< / md-toolbar> 
< / div> 
< div flex layout =rowlayout-align =center> 
< md-content flex =50> 
 Lorem ipsum dolor坐amet，ne quod novum mei。海omnium发现mediocrem在，在lobortis endingemque nam。 Ne deleniti appetere reprimique pro，inani labitur disputationi te sed。 vix sale omnesque，id pro labitur reformidans accomare，cum labores honestatis eu。 Nec quem lucilius在，eam praesent reformidans no。 Sed laudem aliquam ne。 
< p> 
 facete delenit论据暨暨。 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。每隔一段时间就会变得非常流行。 
< / p> 
< p> 
 Ad sea dolor accusata consequuntur。坐在沙发上，代理人等。一直以来都是不同寻常的人群，所有人都知道自己的意愿。 Tequi docendi accusam efficiantur，doming noster prodesset eam ei。在vel move move，，，conven refer，，，，ce ce ce ce ce ce sit sit sit sit sit sit 
< / p> 
< p> 
 Sit saepe questio reprimique id，duo no congue nominati，cum id nobis facilisi。没有est laoreet dissentias，idque consectetuer eam id。 Clita将他的solumful assitverit，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合作伙伴指示器ei pro，eu nullam principes qui，请求justo omnes et quo。 
< / p> 
< p> 
 Sint unum eam id。坐在fastidii theophrastus，mutat senserit repudiare等。 Atqui appareat repudiare ad nam，et ius alii incorrupte。 Alii nullam libris his ei，meis aeterno at eum。 Ne aeque tincidunt duo。在audire malorum mel中，tamquam efficiantur拥有te。 
< / p> 
< p> 
可以用来定制广告素材，方便使用。优先权解释权，裁决权。 Voluptatum mediocritatem问题。 Fabulas dolorem ei，quem molestie persequeris et坐。 
< / p> 
< p> 
 Est vivendum comprehensam endingemque，其中包括cerio 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有enim habemus tibique。 Cu latine electram cum，ridens propriae intellegat eu mea。 
< / p> 
< p> 
在液体食品领域的二重奏，必然会推动。 Ius id aeterno debitis atomorum，et sed feugait voluptua，brute tibique no vix。 Eos modo esse ex，ei omittam imperdiet pro。 Vel assum alubcius 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> 
可以用来定制广告素材，方便使用。优先权解释权，裁决权。 Voluptatum mediocritatem问题。 Fabulas dolorem ei，quem molestie persequeris et坐。 
< / p> 
< p> 
 Est vivendum comprehensam endingemque，其中包括cerio 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有enim habemus tibique。 Cu latine electram cum，ridens propriae intellegat eu mea。 
< / p> 
 
< / md-content> 
< / div> 
< / 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 type =text / javascript> 
 
 
 .module（'starterApp'，['ngMaterial']）
 .run（函数（$ log）{
 $ log.debug（starterApp + ngMaterial running ...）; 
}）; 
 
< / script> 
 
< / body> 
< / html>

我的问题是，如何使md内容可滚动？底部的div应该是一个粘性的页脚。注意，在铬看起来工程，但Firefox上没有。我相信firefox，因为chrome对flexbox有问题。

我创建了一个plunker，但是我不能在链接中插入链接，它总是显示一个错误信息。

解决方案

更新

Angular-Material 1.1.1不再出现此问题 - 原来的问题是在0.8.3版本的时候

ORIGINAL

在外部元素上也使用md-content。

 < body ng-app =starterApplayout =column layout-fill> 
 
< div flex =30style =border：1px solid darkgrey; background-color：＃1CA9F0;>< / div> 
 < div flex =5layout =rowlayout-align =center> 
< md-toolbar flex =50> 
< h2 class =md-toolbar-tools> 
< span>工具栏< / span> 
< / h2> 
< / md-toolbar> 
< / div> 
< md-content flex layout =rowlayout-align =center> 
< md-content flex =50> 
 ... 
< / md-content> 
< / md-content> 
< / md-content> 
  ... 
< / body>

[Plunkr]

请参阅：

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.

I've created a plunker, but I can't insert link into the thread, it appears always an error msg.

解决方案

UPDATE

This problem no longer appears with Angular-Material 1.1.1 - the original question was at the time of version 0.8.3

ORIGINAL

Use md-content on the outer elements as well.

<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

See: https://github.com/angular/material/issues/1906

这篇关于Angular Material：如何使内容可滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！