将所有孩子的高度设置为父母固定高度的 50%答案

【问题标题】：Set height of all childs to 50% of parent fixed height将所有孩子的高度设置为父母固定高度的 50%
【发布时间】：2017-05-08 18:27:22
【问题描述】：

我有一个包装器，其中一些框从带有ng-repeat 的列表循环而来。包装器的固定高度为300px。当我循环列表并且length 为1，因此它只有一个框时，我使用ng-class 向框添加一个类，以填充包装器的整个空间。这工作正常。

如果列表有多个框，我想将框的height 设置为包装器的50%。在截图中，有三个框，应该有一个height 和150px（全部）。所以前两个框应该使用300px 包装器的一半和150px 的height，第三个框也应该有150px height，但它是不可见的（带有overflow: auto; 的滚动条更多比两个盒子）。我也用ng-class 尝试了这个，并将height 的50% 设置为框，但它没有用。有什么想法吗？

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.myList1 = [{
    id: 1,
    name: "Box 1"
  }];

  $scope.myList2 = [{
      id: 1,
      name: "Box 1"
    },
    {
      id: 2,
      name: "Box 2"
    }, {
      id: 3,
      name: "Box 3"
    }
  ];
});

body {
  height: 100vh;
  width: 100vw;
}

.wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  border: 1px solid blue;
  overflow: auto;
  height: 300px;
}

.box {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  background-color: orange;
  border-bottom: 1px solid red;
}

.fillBox {
  flex: 1 1 auto;
}

.fillHalfBox {
  height: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <div class="wrapper">
    <div class="box" ng-repeat="box in myList1" ng-class="{fillBox: myList1.length == 1}">
      {{box.name}}
    </div>
  </div>

  <div class="wrapper">
    <div class="box" ng-repeat="box in myList2" ng-class="{fillHalfBox: myList2.length > 1}">
      {{box.name}}
    </div>
  </div>
</div>

【问题讨论】：

你想要这个输出吗？ i.stack.imgur.com/V97y9.png
实际上，如果您按照以下 PTA 所述修复错字，您的代码似乎可以正常工作
@SahilDhir 这些框应该与 flex-direction 列一起显示，因此它们之间不是连续的。

标签： html css angularjs flexbox

【解决方案1】：

你可以试试这个。

{fillHalfBox: myList1.length > 1} -> {fillHalfBox: myList2.length > 1}

【讨论】：

看不出为什么这被否决了，因为它似乎解决了问题

【解决方案2】：

您的 ng-class 表达式未正确评估。请尝试检查表达式。或者您可以尝试其他有条件地添加类的方法。阅读这里，https://scotch.io/tutorials/the-many-ways-to-use-ngclass

【讨论】：