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

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

转载作者：太空宇宙更新时间：2023-11-04 10:55:54

我正在使用 Angular Material 的 md-content 指令创建一个部分，该部分可以 flex 以填充可用的垂直空间并滚动其内容。问题是当使用小屏幕查看页面时，内容会缩小到实际上消失的程度。我希望 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。为了使所需的部分可滚动并使其 flex 到视口(viewport)的底部，我将其所有父元素作为具有 layout 属性的 md-content 元素。我可以在可滚动元素上设置一个 min-height，但是当浏览器缩小时，它的父级 md-content 有一个滚动条。我可以在 that md-content 上放置另一个 min-height，但这需要我知道其内容的高度(可能是动态)。

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

最佳答案

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

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

现在解决你的问题:通常小屏幕高度也伴随着小屏幕宽度，因此你可以使用 Angular Material layout breakpoints .在我的示例中，我使用 xs/gt-xs 断点(599/600px 宽度)通过应用 layout-xs/layout-gt-xs 和 flex-gt-xs。小型设备使用列布局，外部 md-content 是唯一滚动的东西。更大的设备使用行布局和内部 md-content 滚动。

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

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