AngularJS：引导程序中的响应高度

Question

我有一个 div 容器。里面有 div 4 crads。只有在最后一张牌上可能会有两张或三张牌，此时牌的高度应该不会受到影响。

这正是我想要的。但是当我拖动并调整窗口屏幕大小时，高度不应该受到影响。

• ) 所有 4 张卡片的高度应始终相同。如果是最后一张牌中的一张或两张三张牌。

在这三个中，任何一个都会来。并且它是动态的。

• ) 如果第 4 张卡片中只有一张卡片，则高度应为 100%。并且所有卡片高度应该相同。

• ) 如果第四张牌中有两张牌，高度应该是 (100% / 2 )。那个时候所有卡片的高度也应该相同。在最后一张卡片里面那 2 张卡片的高度是 50%。我将添加垂直滚动来查看。

• ) 如果第4张卡片有卡片，高度应该是( 100% /3)。

CodePen

 
  $scope.detailsArray[0].details.forEach(function (card) {
        console.log(card);
  });

 <div class="tab-pane fade">
      <div class="row">
        <div class="col-md-6 padd-l1" ng-repeat="card in detailsArray[0].details>
            <div class="object-view">
                <div class="get-object">
                   <div class="get-object-wrap">
                     <div id="{{card.value}}"></div>
                     </div>
                   </div>
                </div>                       
            </div>
      </div>
 </div>

{
    "result": [
        {
            Category: ""
            Footer: ""
            L1_Name: ""
            L2_Name: ""
            L3_Name: ""
            Tag: ""
            details: [
                Chart_Caveats: ""
                Chart_Chart_type: ""
                Chart_isFlip: ""
                Chart_order: ""
                count: "1"
            ]
            isactive: "0"
            isfixed: "0"
        },
        {
            Category: ""
            Footer: ""
            L1_Name: ""
            L2_Name: ""
            L3_Name: ""
            Tag: ""
            details: [
                Chart_Caveats: ""
                Chart_Chart_type: ""
                Chart_isFlip: ""
                Chart_order: ""
                count: "2"
            ]
            isactive: "0"
            isfixed: "0"
        },
         {
            Category: ""
            Footer: ""
            L1_Name: ""
            L2_Name: ""
            L3_Name: ""
            Tag: ""
            details: [
                Chart_Caveats: ""
                Chart_Chart_type: ""
                Chart_isFlip: ""
                Chart_order: ""
                count: "3"
            ]
            isactive: "0"
            isfixed: "0"
        },

}

在这里，计数 1、2 和 3 在那里。如果计数为 1，则高度 100%，如果计数为 2，则高度 (100% /2) 50%，如果计数为 3（则 100% / 3）。

Answer 1

您需要借助 JavaScript 来实现这一点；你可以使用弹性盒子，但在所有情况下它都不会占据 div 的整个区域；如果 div 的数量太多，您可能还必须隐藏溢出（我这样做了）；

在下面工作sn-p：

$(document).ready(function() {
  sizeDivs();
});

function sizeDivs() {
  var totalDivSize = 0;
  $(".lastDiv").each(function() {
    totalDivSize = $(this).outerHeight();
  })

  var numberOfDivs = 0;
  $(".lastDiv>.internalDiv").each(function() {
    numberOfDivs++;
  })

  var individualHeights = totalDivSize / numberOfDivs;
  individualHeights = individualHeights + "px";
  $(".lastDiv>.internalDiv").css('height', individualHeights);
}

$(window).resize(function() {
  sizeDivs();
})

.good-review-score {
  background-color: #66CC33;
  color: white;
  text-align: center;
  padding: 2%;
  margin-right: 1%;
}

.card {
  border: 2px solid red;
  height: 50vh;
  overflow: hidden
}

.lastDiv {
  border: 2px dashed blue;
  display: flex;
  flex-direction: column;
}

.lastDiv>.internalDiv {
  border: 1px dotted orange;
  overflow: hidden;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-block">
          <h1 class="card-text good-review-score float-left">8.0</h1>
          <h4 class="card-title">Card on the Left 1</h4>
          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        </div>
        <div class="card-footer">
          <p class="card-text text-right">Footer Text - Possible Link Out</p>
        </div>
      </div>
      <div class="card">
        <div class="card-block">
          <h1 class="card-text good-review-score float-left">8.0</h1>
          <h4 class="card-title">Card on the Left 2</h4>
          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        </div>
        <div class="card-footer">
          <p class="card-text text-right">Footer Text - Possible Link Out</p>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="card">
        <div class="card-block">
          <h1 class="card-text good-review-score float-left">8.0</h1>
          <h4 class="card-title">Card on the Right 1</h4>
          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        </div>
        <div class="card-footer">
          <p class="card-text text-right">Footer Text - Possible Link Out</p>
        </div>
      </div>
      <div class="card lastDiv">
        <!-- internal card 1 -->
        <div class='internalDiv'>
          <div class="card-block">
            <h1 class="card-text good-review-score float-left">8.0</h1>
            <h4 class="card-title">Card on the Right 1</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.
            </p>
          </div>
          <div class="card-footer">
            <p class="card-text text-right">Footer Text - Possible Link Out</p>
          </div>
        </div>
        <!-- internal card 2 -->
        <div class='internalDiv'>
          <div class="card-block">
            <h1 class="card-text good-review-score float-left">8.0</h1>
            <h4 class="card-title">Card on the Right 2</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.
            </p>
          </div>
          <div class="card-footer">
            <p class="card-text text-right">Footer Text - Possible Link Out</p>
          </div>
        </div>

        <!-- internal card 3 -->
        <div class='internalDiv'>
          <div class="card-block">
            <h1 class="card-text good-review-score float-left">8.0</h1>
            <h4 class="card-title">Card on the Right 3</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.
            </p>
          </div>
          <div class="card-footer">
            <p class="card-text text-right">Footer Text - Possible Link Out</p>
          </div>
        </div>

        <!-- internal card 4 -->
        <div class='internalDiv'>
          <div class="card-block">
            <h1 class="card-text good-review-score float-left">8.0</h1>
            <h4 class="card-title">Card on the Right 4</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.
            </p>
          </div>
          <div class="card-footer">
            <p class="card-text text-right">Footer Text - Possible Link Out</p>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>