调整ng-if指令动态生成的<div>标签的高度

Question

问候和称呼的朋友。

场景： 我正在制作一个页面，该页面将基于后端的JSON信息生成发票。它在包含的div上使用ng-repeat，然后在多个p标签上使用ng-if，如下所示：

<div ng-repeat="thumb in responseArray" ng-if="responseArray.length >= 1" class="figures" layout="column" layout-align="center end">
            <p><b>{{thumb.supplier_name}}</b></p>
            <p class="stakedLabel">Staked:</p>
            <p class="staked">{{thumb.staked}}</p>
            <p class="returnsLabel">Returns:</p>
            <p class="returns"> {{thumb.returns}}</p>
            <p class="grossLabel">Gross: </p>
            <p ng-if="thumb.theList.length > 1" class="gross">{{thumb.gross}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartASingleton">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartBSingleton">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartA">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartB">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartC">{{thumb.theList[0][2]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartA">{{thumb.theList[1][0]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartB">{{thumb.theList[1][1]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartC">{{thumb.theList[1][2]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartA">{{thumb.theList[2][0]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartB">{{thumb.theList[2][1]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartC">{{thumb.theList[2][2]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartA">{{thumb.theList[3][0]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartB">{{thumb.theList[3][1]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartC">{{thumb.theList[3][2]}}</p>
            <p ng-if="thumb.chargeDetailsFive != '' && thumb.theList.length > 4" class="chargeDetailsFivePartA">{{thumb.theList[4][0]}}</p>
            <p ng-if="thumb.chargeDetailsFive != '' && thumb.theList.length > 4" class="chargeDetailsFivePartB">{{thumb.theList[4][1]}}</p>
            <p ng-if="thumb.chargeDetailsFive != '' && thumb.theList.length > 4" class="chargeDetailsFivePartC">{{thumb.theList[4][2]}}</p>                
        </div>

问题是我希望div在运行时根据其内容理想地调整大小，否则将无法动态设置两个不同的高度。 div的生成方式有两种总体选择：一种类型将大大缩短，当List.length为1时将使用该类型，另一种类型的大小大约是其两倍。

我当前的CSS如下：

   .figures {
        border-width: 2px;
        border-style: solid;
        border-color: black;
        position: relative;
        height: 180px;
        top: -20px;
    }  

我尝试了许多不同的操作，例如不设置高度，将高度设置为自动，将溢出设置为自动，使用clearfix解决方法等等。

任何帮助将不胜感激。

Answer 1

我最终通过为每种类型的记录（表示div的长度）创建一个列表，然后在每个列表上使用ng-repeat来修复它。这使我可以为每种类型设置不同的类，从而设置不同的高度。

一种解决方法，但效果很好

<div ng-repeat="thumb in arrayOfOneTiers" ng-if="arrayOfOneTiers.length >= 1" class="figuresOneTier" layout="column" layout-align="center end">
            <p><b>{{thumb.supplier_name}}</b></p>
            <p class="stakedLabel">Staked:</p>
            <p class="staked">{{thumb.staked}}</p>
            <p class="returnsLabel">Returns:</p>
            <p class="returns"> {{thumb.returns}}</p>
            <p class="grossLabel">Gross: </p>
            <p ng-if="thumb.theList.length > 1" class="gross">{{thumb.gross}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartASingleton">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartBSingleton">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartA">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartB">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartC">{{thumb.theList[0][2]}}</p>
        </div>
        <div ng-repeat="thumb in arrayOfTwoTiers" ng-if="arrayOfTwoTiers.length >= 1" class="figuresTwoTier" layout="column" layout-align="center end">
            <p><b>{{thumb.supplier_name}}</b></p>
            <p class="stakedLabel">Staked:</p>
            <p class="staked">{{thumb.staked}}</p>
            <p class="returnsLabel">Returns:</p>
            <p class="returns"> {{thumb.returns}}</p>
            <p class="grossLabel">Gross: </p>
            <p ng-if="thumb.theList.length > 1" class="gross">{{thumb.gross}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartASingleton">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartBSingleton">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartA">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartB">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartC">{{thumb.theList[0][2]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartA">{{thumb.theList[1][0]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartB">{{thumb.theList[1][1]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartC">{{thumb.theList[1][2]}}</p>
        </div>
        <div ng-repeat="thumb in arrayOfThreeTiers" ng-if="arrayOfThreeTiers.length >= 1" class="figuresThreeTier" layout="column" layout-align="center end">
            <p><b>{{thumb.supplier_name}}</b></p>
            <p class="stakedLabel">Staked:</p>
            <p class="staked">{{thumb.staked}}</p>
            <p class="returnsLabel">Returns:</p>
            <p class="returns"> {{thumb.returns}}</p>
            <p class="grossLabel">Gross: </p>
            <p ng-if="thumb.theList.length > 1" class="gross">{{thumb.gross}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartASingleton">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartBSingleton">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartA">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartB">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartC">{{thumb.theList[0][2]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartA">{{thumb.theList[1][0]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartB">{{thumb.theList[1][1]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartC">{{thumb.theList[1][2]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartA">{{thumb.theList[2][0]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartB">{{thumb.theList[2][1]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartC">{{thumb.theList[2][2]}}</p>
        </div>
        <div ng-repeat="thumb in arrayOfFourTiers" ng-if="arrayOfFourTiers.length >= 1" class="figuresFourTier" layout="column" layout-align="center end">
            <p><b>{{thumb.supplier_name}}</b></p>
            <p class="stakedLabel">Staked:</p>
            <p class="staked">{{thumb.staked}}</p>
            <p class="returnsLabel">Returns:</p>
            <p class="returns"> {{thumb.returns}}</p>
            <p class="grossLabel">Gross: </p>
            <p ng-if="thumb.theList.length > 1" class="gross">{{thumb.gross}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartASingleton">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartBSingleton">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartA">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartB">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartC">{{thumb.theList[0][2]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartA">{{thumb.theList[1][0]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartB">{{thumb.theList[1][1]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartC">{{thumb.theList[1][2]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartA">{{thumb.theList[2][0]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartB">{{thumb.theList[2][1]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartC">{{thumb.theList[2][2]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartA">{{thumb.theList[3][0]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartB">{{thumb.theList[3][1]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartC">{{thumb.theList[3][2]}}</p>
        </div>
        <div ng-repeat="thumb in arrayOfFiveTiers" ng-if="arrayOfFiveTiers.length >= 1" class="figuresFiveTier" layout="column" layout-align="center end">
            <p><b>{{thumb.supplier_name}}</b></p>
            <p class="stakedLabel">Staked:</p>
            <p class="staked">{{thumb.staked}}</p>
            <p class="returnsLabel">Returns:</p>
            <p class="returns"> {{thumb.returns}}</p>
            <p class="grossLabel">Gross: </p>
            <p ng-if="thumb.theList.length > 1" class="gross">{{thumb.gross}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartASingleton">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.theList.length == 1" class="chargeDetailsOnePartBSingleton">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartA">{{thumb.theList[0][0]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartB">{{thumb.theList[0][1]}}</p>
            <p ng-if="thumb.chargeDetailsOne != '' && thumb.theList.length > 1" class="chargeDetailsOnePartC">{{thumb.theList[0][2]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartA">{{thumb.theList[1][0]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartB">{{thumb.theList[1][1]}}</p>
            <p ng-if="thumb.chargeDetailsTwo != '' && thumb.theList.length > 1" class="chargeDetailsTwoPartC">{{thumb.theList[1][2]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartA">{{thumb.theList[2][0]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartB">{{thumb.theList[2][1]}}</p>
            <p ng-if="thumb.chargeDetailsThree != '' && thumb.theList.length > 2" class="chargeDetailsThreePartC">{{thumb.theList[2][2]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartA">{{thumb.theList[3][0]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartB">{{thumb.theList[3][1]}}</p>
            <p ng-if="thumb.chargeDetailsFour != '' && thumb.theList.length > 3" class="chargeDetailsFourPartC">{{thumb.theList[3][2]}}</p>
            <p ng-if="thumb.chargeDetailsFive != '' && thumb.theList.length > 4" class="chargeDetailsFivePartA">{{thumb.theList[4][0]}}</p>
            <p ng-if="thumb.chargeDetailsFive != '' && thumb.theList.length > 4" class="chargeDetailsFivePartB">{{thumb.theList[4][1]}}</p>
            <p ng-if="thumb.chargeDetailsFive != '' && thumb.theList.length > 4" class="chargeDetailsFivePartC">{{thumb.theList[4][2]}}</p>
        </div>

Answer 2

尝试此CSS

  .figures {
        border-width: 2px;
        border-style: solid;
        border-color: black;
        position: relative;
        height: 100%;
        min-height: 180px;
        top: -20px;
    }