Angular Material全屏问题中的分屏布局答案

【问题标题】：Split Screen layout in Angular Material fullscreen issueAngular Material全屏问题中的分屏布局
【发布时间】：2017-12-18 09:18:17
【问题描述】：

我正在尝试在 Angular Material 中创建分屏布局，但我的元素没有全屏显示。

 <md-content layout="column">

<div layout="column" layout-gt-sm="row" flex>
<div layout="column" flex="100" flex-gt-sm="50"  style="background-color: red;">

    <!-- left split screen -->
    <div flex="100" layout="column">
    <h1>hello</h1>

    </div>
</div> 

<!-- right split screen -->
<div layout="column" flex="100" flex-gt-sm="50"  style="background-color: blue;">
    <div flex="100" layout="column">
        <h1>angular</h1>
    </div>
</div>

这是我的笨蛋link

【问题讨论】：

标签： css angularjs flexbox angular-material

【解决方案1】：

你只需要添加到你的css中

.layout-row{
  height:100vh; 
}

这里是全屏板here

【讨论】：

【解决方案2】：

你只需要将 body 布局更改为 row，这样它就占据了整个高度，将 flex 添加到 md-content 组件，瞧！你有你想要的全屏。

<body ng-app="YourApp" layout="row">
  <md-content ng-controller="TestCtrl" layout="column" flex>
    <div layout="row" flex>
      <div layout="column" flex="50"  style="background-color: red;">
        <h1>hello</h1>
      </div>
      <div layout="column" flex="50"  style="background-color: #bada55;">
        <h1>angular</h1>
      </div>
    </div> 
  </md-content>
</body>

这是plunker。

希望对你有帮助！

【讨论】：