Question

我想制作一个工具栏固定在顶部的布局，底部有两个并排的内容可滚动部分。

当md-content仅嵌套在一个div下时，我可以正确创建此布局。

示例（CodePen）：

<body ng-app="app" layout="column">
  <md-toolbar class="md-whiteframe-z4">Toolbar</md-toolbar>

  <div layout="column" flex>
    <md-content layout flex>
      <md-content flex="50" layout="column">
      <md-content flex="50" layout="column">

但是，如果我在两个或更多md-content下嵌套div，这会破坏布局并导致内容溢出并导致整个页面可滚动。

示例（CodePen）：

<body ng-app="app" layout="column">
  <md-toolbar class="md-whiteframe-z4">Toolbar</md-toolbar>

  <div layout="column" flex>
    <div layout="column" flex>
      <md-content layout flex>
        <md-content flex="50" layout="column">
        <md-content flex="50" layout="column">

发生了什么？如何在嵌套布局中创建可滚动的md-content？

Answer 1

这是https://stackoverflow.com/a/29516060/2553215的情况。只需在外部元素上使用md-content代替div。

http://codepen.io/kuhnroyal/pen/EPQeZd

Angular Material嵌套布局会破坏md-content滚动

1 个答案: