为什么这些 Angular div 不垂直拉伸？答案

【问题标题】：Why Are These Angular Divs Not Stretching Vertically?为什么这些 Angular div 不垂直拉伸？
【发布时间】：2016-06-02 15:43:43
【问题描述】：

让我的 Angular 1.4 div 填满整个页面时遇到了很多麻烦。我用谷歌搜索了“如何垂直拉伸内容”并找到了很多答案，但没有一个真正适合我。我认为 flexbox 会是一个很好的东西，可以与周围的所有炒作一起使用，但我什至无法获得一个 div 来填充页面。嗯。这是我目前使用的代码，直接取自 angular 文档：

<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 文件中唯一的内容。谢谢，吉姆。

【问题讨论】：

你试过为弹性容器设置高度吗？

标签： javascript html css angularjs flexbox

【解决方案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>

【讨论】：