2016-01-21 65 views
1

我想制作一个顶部固定有工具栏的布局,底部有两个并排的内容可滚动部分。角度材质嵌套布局中断md内容滚动

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 s此打破了布局和使内容溢出并导致整个页面是滚动的。

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

回答