为什么这些角度Div不垂直拉伸？

Question

我在填充整个页面时遇到角度1.4 div很麻烦。我已经用谷歌搜索了＃34;如何垂直拉伸内容＆＃34;并找到了很多答案，但其中没有一个真正适合我。我认为flexbox对于围绕它的所有炒作都是一件好事，但我甚至无法获得一个div来填充页面。 SMH。以下是我目前正在使用的角度文档中的代码：

<div layout="row" layout-sm="column" class="lightblue">
  <div flex>
    I'm above on mobile, and to the left on larger devices.
  </div>
  <div flex>
    I'm below on mobile, and to the right on larger devices.
  </div>
</div>

这就是它的样子：

有谁知道我做错了什么以及如何让这些容器伸展以填满整个页面？我从yeoman生成器angular-gulp开始这个项目，上面的代码是我的main.html文件中唯一的东西。谢谢，吉姆。

Answer 1

孩子们正在伸展。您需要为父级添加高度。

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

.lightblue {
  min-height: 100vh;
  background-color: lightblue;
}

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

<div ng-app="BlankApp">
  <div layout="row" layout-sm="column" class="lightblue">
    <div flex>
      I'm above on mobile, and to the left on larger devices.
    </div>
    <div flex>
      I'm below on mobile, and to the right on larger devices.
    </div>
  </div>

</div>