Question

我使用Angular Material的md-content指令创建一个部分，该部分可以弯曲以填充可用的垂直空间并滚动它的内容。问题是当用小屏幕查看页面时，内容会缩小到有效消失的程度。我希望md-content停止滚动或具有最小高度，以便页面滚动条显示，用户仍然可以看到内容。

更新：以下是了解此问题的人：https://plnkr.co/edit/NVbEHo0CPxX5Zzi4U88U?p=preview

  <body layout="column">
  <div>
    <h1>Header</h1>
  </div>
  <md-content layout="row">
    <div flex="50">Left Column</div>  
    <md-content flex="50" layout="column">
      <h2>Section Header</h2>
      <md-content layout="column" flex>
        <h3>Scroll Header</h3>
        <md-content flex layout="column" style="min-height: 300px">
          <md-content flex>
            scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>
            scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>
            scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>
          </md-content>
        </md-content>
      </md-content>
    </md-content>
  </md-content>
</body>

如果浏览器窗口很大，则可滚动内容会按预期滚动。缩小浏览器时，带有可滚动内容的md-content缩小为空。

更新2：我用更好的例子更新了我的plunker。为了使所需的部分可滚动并使其弯曲到视口的底部，我将其所有父元素都作为md-content元素并具有layout属性。我可以在可滚动元素上设置min-height，但是当浏览器收缩时，它的父md-content有一个滚动条。我可以在上添加min-height md-content，但这需要我知道其内容的高度（可能是动态的）。

理想情况下，当垂直缩小浏览器时，我希望可滚动内容仅缩小到其最小高度，然后将其所有父md-content元素的行为更改为不滚动，只有出现body滚动条。

Answer 1

示例和答案都有2个javascript错误。 Angular-material未加载，因为md-content是一个指令，这可能会导致问题。除此之外，我并不完全知道它如何与angular2一起工作，控制台中也存在angular2错误。

我将示例更新为angular-material-1.0.0 / angular-1.4.8，并添加了一个模块和ngMaterial依赖项。

现在出现问题：通常屏幕高度较小也会带有较小的屏幕宽度，因此您可以使用角度材质layout breakpoints。在我的示例中，我使用xs/gt-xs断点（599 / 600px宽度）通过应用layout-xs/layout-gt-xs和flex-gt-xs在布局之间切换。小型设备使用列布局，外部md-content是滚动的唯一内容。较大的设备使用行布局和内部md-content滚动。

＆＃13;

angular.module('app', ['ngMaterial']);

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

<body ng-app="app" layout-gt-xs="column">
  <md-content flex layout="column">
    <div>
      <h1>Header</h1>
    </div>
    <md-content flex-gt-xs layout="row" layout-xs="column">
      <div flex-gt-xs="50">Shrink the browser vertically to see the problem with the scroll bars. The parent md-content scrolls instead of the body.</div>  
      <md-content flex-gt-xs="50" layout="column">
        <h2>Section Header</h2>
        <md-content flex-gt-xs layout="column">
          <h3>Scroll Header</h3>
          <md-content flex-gt-xs layout="column">
            <md-content flex-gt-xs>
              scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>
              scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>
              scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>scrollable content<br/>
            </md-content>
          </md-content>
        </md-content>
      </md-content>
    </md-content>
  </md-content>
</body>
</html>

＆＃13;

您可以在plunkr中更好地查看，布局内容很难在附带的代码段中进行测试。

如何禁用在md-content中滚动或在移动设备上使用最小高度

1 个答案: