AngularJS 中的 md-content 滚动问题答案

【问题标题】：md-content Scroll Issue in AngularJSAngularJS 中的 md-content 滚动问题
【发布时间】：2016-07-12 22:08:46
【问题描述】：

我使用响应式和 Angular 材质设计了一个带有页眉、内容正文和页脚的网页。 Content Body 有md-content，里面有多个<p> 段落文本内容。我将溢出设置为自动 (overflow: auto)。但我无法滚动内容。

以下源代码包含 HTML、AngularJS 和 CSS：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<style>

html, body {height: 100%; margin:0px !important;}

header{
    position: fixed;
    top: 0;
    height: 50px;
    width: 100%;
    background-color: #777;
    z-index: 1;
}

.content{
    padding-top: 50px;
    padding-bottom: 50px;
    background-color:#ffffcc;
    position: fixed;
    top:0px;
    bottom:0px;
    width:100%;
}

footer{
    background-color: #777;
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    z-index: 1;
}

.contentdemoBasicUsage div.demo-content {
  height: 600px; }

.contentdemoBasicUsage div[ng-controller] {
  height: 100%;
  padding-bottom: 15px; }

.contentdemoBasicUsage md-content {
  padding: 24px; 
  height: calc(100% - 100px);
  overflow:auto;
  }
</style>
</head>

<body>
<header class="header">my header</header>
    <div class="content">
<div ng-app="MyApp" class="contentdemoBasicUsage" ng-controller="AppCtrl" layout="column" ng-cloak="">
  <md-toolbar class="md-warn">
    <div class="md-toolbar-tools">
      <h2 class="md-flex">Toolbar: md-warn</h2>
    </div>
  </md-toolbar>
	
  <md-content flex="" layout-padding="">
    <p>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>

    <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>

    <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>
  </md-content>

</div>
</div>
    <footer class="footer">my footer</footer>
<!--
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
-->
<!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
  <script src="http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script type="text/javascript">
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('AppCtrl', function($scope) {

});
</script>
</body>
</html>

【问题讨论】：

查看stackoverflow.com/questions/36188444/…的答案
@sdfacre 我试过了但是不行...请检查一次...

标签： html css angularjs scrollbar

【解决方案1】：

将布局填充添加到您的 ng-app div

<div ng-app="MyApp" class="contentdemoBasicUsage" ng-controller="AppCtrl" layout="column" ng-cloak="" layout-fill>
....

见http://codepen.io/anon/pen/WwONQV

【讨论】：

谢谢。如何制作浮动：左侧为内部md-content。请帮助我...
将 layout='row' 添加到外部 md 内容。检查material.angularjs.org/latest/layout/introduction 角度材料布局
如何做移动响应？ md-content 有 2 个内部 md-content。在移动视图中，2 个内部 md-content 应该放在顶部和底部，而不是左右放置。请帮助我...
将 layout-xs="column" 添加到外部 md 内容。所以你的外部 md-content 应该同时具有 layout="row" 和 layout-xs="column"。
谢谢。还有一个帮助。如何删除移动设备的高度属性。因为现在高度设置为设备视口高度。如果是手机。我需要删除高度。请帮助我...

【解决方案2】：

溢出的属性值-

可见 - 溢出不被剪裁。它呈现在元素的框外。这是默认设置
hidden - 溢出的内容被剪掉，其余内容不可见
scroll - 溢出被剪裁，但添加滚动条以查看其余内容
auto - 如果溢出被剪裁，应添加滚动条以查看其余内容
initial - 将此属性设置为其默认值。了解初始
inherit - 从其父元素继承此属性。了解继承

尝试使用 scroll 值进行溢出。

【讨论】：