javascript - 如何将 child 的div高度扩展到 parent 的高度

Question

我的页面结构如下:

<div class="parent">
   <div class="child">
   </div>
   <div class="child">
   </div>
   <div class="child">
   </div> 
</div>

我想将 .child 的高度设置为等于 .parent 的高度(这是已知的)，但不定位 child 的绝对高度。所以结果将是一个与父级一样高的子级列表。

Answer 1

您可以设置父级的高度，然后将每个子级的高度设置为 100%，这样每个子级的高度都将与父级相同，即使这会扩展父级。

.parent
.child:nth-child(1) {background-color: #f00;}
.child:nth-child(2) {background-color: #0f0;}
.child:nth-child(3) {background-color: #00f;}

.parent {
  height: 100px;
  background-color: red;
}

.child {
  height: 100%;
}

<div class="parent">
   <div class="child">
   </div>
   <div class="child">
   </div>
   <div class="child">
   </div> 
</div>