Javascript 如何将子div height扩展到parent'；s高度

我的页面结构如下：

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

---

我想将.child的高度设置为.parent的高度（已知），但不将子对象定位为绝对值。因此，结果将是一个自身与父项一样高的子项列表。

您可以设置父项的高度，然后只需将每个子项的高度设置为100%，它将使每个子项具有与父项相同的高度，即使这会扩展父项

.parent
.child:n个child（1）{背景色：#f00；}
.child:n子（2）{背景色：#0f0；}
.child:n个child（3）{背景色：#00f；}
.家长{
高度：100px；
背景色：红色；
}
.孩子{
身高：100%；
}

---

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

.parent
.child:n个child（1）{背景色：#f00；}
.child:n子（2）{背景色：#0f0；}
.child:n个child（3）{背景色：#00f；}
.家长{
高度：100px；
背景色：红色；
}
.孩子{
身高：100%；
}

---

您可以尝试使用

表格布局

或

弹性框

，这将使所有子项的高度相等：

.parent{边框：2px实心#ccf；高度：300px；}
.child:n个child（1）{背景色：#f99；}
.child:n个child（2）{背景色：#9f9；}
.child:n个child（3）{背景色：#99f；}
.家长{
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：行；
-ms柔性方向：行；
弯曲方向：行；
-webkit柔性包装：nowrap；
-ms-flex-wrap:nowrap；
柔性包装：nowrap；
-webkit内容：flex start；
-ms-flex-pack：启动；
调整内容：灵活启动；
-webkit对齐内容：拉伸；
-ms柔性线包装：弹性；
对齐内容：拉伸；
}
.父母，孩子{
宽度：33.3333%；
-网络工具包订单：0；
-ms弹性订单：0；
顺序：0；
-webkit flex:0 1自动；
-ms-flex:01自动；
flex:01自动；
-webkit自动对齐：自动；
-ms flex项目对齐：自动；
自对准：自动；
}

---

您可以尝试使用

表格布局

或

弹性框

，这将使所有子项的高度相等：

.parent{边框：2px实心#ccf；高度：300px；}
.child:n个child（1）{背景色：#f99；}
.child:n个child（2）{背景色：#9f9；}
.child:n个child（3）{背景色：#99f；}
.家长{
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：行；
-ms柔性方向：行；
弯曲方向：行；
-webkit柔性包装：nowrap；
-ms-flex-wrap:nowrap；
柔性包装：nowrap；
-webkit内容：flex start；
-ms-flex-pack：启动；
调整内容：灵活启动；
-webkit对齐内容：拉伸；
-ms柔性线包装：弹性；
对齐内容：拉伸；
}
.父母，孩子{
宽度：33.3333%；
-网络工具包订单：0；
-ms弹性订单：0；
顺序：0；
-webkit flex:0 1自动；
-ms-flex:01自动；
flex:01自动；
-webkit自动对齐：自动；
-ms flex项目对齐：自动；
自对准：自动；
}

---

可以使用CSS Flexbox为子元素提供父div的高度

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

.parent{
display:flex;
}

.家长{
显示器：flex；
}

可以使用CSS Flexbox为子元素提供父div的高度

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

.parent{
display:flex;
}

.家长{
显示器：flex；
}

可以使用inherit属性继承父元素的高度。Inherit将始终采用与设置此属性的第一个元素相同的值。 例如：

.parent{
高度：200px；
宽度：600px；
显示器：flex；
}
.儿童1{
身高：继承；
宽度：25%；
背景颜色：绿色；
}
.儿童2{
身高：继承；
宽度：25%；
背景颜色：紫色；
}
.儿童3{
身高：继承；
宽度：25%；
背景颜色：蓝色；
}
.儿童4{
身高：继承；
宽度：25%；
背景色：红色；
}

---

可以使用inherit属性继承父元素的高度。Inherit将始终采用与设置此属性的第一个元素相同的值。 例如：

.parent{
高度：200px；
宽度：600px；
显示器：flex；
}
.儿童1{
身高：继承；
宽度：25%；
背景颜色：绿色；
}
.儿童2{
身高：继承；
宽度：25%；
背景颜色：紫色；
}
.儿童3{
身高：继承；
宽度：25%；
背景颜色：蓝色；
}
.儿童4{
身高：继承；
宽度：25%；
背景色：红色；
}

它们将并排放置，对吗？不，对不起，一个在另一个之下，但每个都与父对象具有相同的高度？还是总高度？这毫无意义。如果不让父对象变大，你不能有3个和父对象一样大的子对象。当然你可以。结果将是一个垂直的孩子列表，每个孩子的身高都与父母相同。和溢出：隐藏；你只需要让一个孩子同时可见，他们将并排放置，对吗？不，对不起，一个在另一个下面，但每个孩子的高度都与父母相同？还是总高度？这毫无意义。如果不让父对象变大，你不能有3个和父对象一样大的子对象。当然你可以。结果将是一个垂直的孩子列表，每个孩子的身高都与父母相同。和溢出：隐藏；您可以一次只显示一个孩子