Javascript 父级的多个div跨度高度

让多个div跨越其父包含div的高度（作为固定高度）的好方法是什么

请参见下图：

以下是建议的标记：

<div class="parent">

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

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

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

</div>

第一组
第二组
第三组

子div应始终填充父div的整个高度，不管有多少个子div，但其高度不必相等，并应根据其内容进行更改

因此，如果一个人有很多内容，它会更大，其他人会相应地调整

我已经用一个表完成了这项工作，但我想可能有一些简单的方法，只使用div，这将是有利的，因为它们对于响应性布局来说更通用

---

是否有一个纯CSS解决方案？

您应该调查Flexbox（）

在这种情况下，您可以添加：

.parent { display:flex; flex-direction: column; }
.child { flex-grow:1; }

柔性方向：“这建立了主轴，从而定义了柔性项目放置在柔性容器中的方向。”

---

Flex Grow：“如果所有项目都将Flex Grow设置为1，则容器中的剩余空间将平均分配给所有子项。”

假设您有：

正文{
保证金：0；
}
.家长{
背景颜色：桃花；
最小高度：100vh；
}
.孩子：第一个孩子{
背景色：黄绿色；
}
.子女：第n名子女（2）{
背景色：淡蓝色；
}
.孩子：最后一个孩子{
背景颜色：珊瑚；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。
前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前。弗林吉亚库拉索酒店。欧盟智者维瓦摩斯·艾罗斯·艾尔多姆·乌尔特里斯和图尔皮斯。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。
在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。努克·奥迪奥·利奥（Nunc odio leo）、欧盟同一地区的accumsan、奥纳·萨皮恩港（porttitor ornare sapien）。
Lorem ipsum dolor sit amet，是一位杰出的献身者。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前。弗林吉亚库拉索酒店。欧盟智者维瓦摩斯·艾罗斯·艾尔多姆·乌尔特里斯和图尔皮斯。一个社会阶层
根据conubia nostra，根据inceptos himenaeos的扭矩。

flex:1将有助于保留元素，即使是父容器。这可能会变得非常棘手，所以请浏览一些flexbox信息

据我所知，我最喜欢的flexbox快速参考指南是

总是要确保在IE上测试最终的代码，就像往常一样，IE在显示你希望它们显示的东西方面很差劲

这里有一个快速演示，在左侧包含一个不均匀的元素，展示flexbox如何处理不同的尺寸。在代码中包含一些注释，以帮助理解发生的基本情况

调整屏幕大小以查看响应。（查看全屏或使用小提琴，这里的迷你预览器似乎不喜欢我使用垂直高度（vh））


.container{
显示器：flex；
宽度：100%；
高度：100vh；
字体大小：24px；
}
.左{
显示器：flex；
灵活方向：列；/*内的元素堆叠在彼此的顶部，与行相反*/
宽度：30%；
文本对齐：居中；
}
.左座{
显示器：flex；
flex:1；/*使元素增长*/
对齐内容：居中；/*水平对齐内容*/
对齐项目：居中；/*垂直对齐内容*/
}
.左块：第n个子（1）{背景色：hsla（50,20%，50%，1）；}
.左区块：第n个子（2）{
背景色：hsla（150,20,50,1）；
填充物：100px 0px；/*填充物添加到左两个，以去除大小不均的块体*/
}
.左块：第n个子（3）{背景色：hsla（200,20%，50%，1）；}
.对{
显示器：flex；
弹性：1；
背景色：hsla（300,20,60,1）；
}
1.右座{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弹性：1；
}

左一
左二
左三
对
父级
具有固定的
高度
？如果没有，那正是他们目前所做的。哦，是的。。父div具有固定的高度。很抱歉，在过去，我们将把它添加到positiveusedflex框中，以强制单个div达到其父级的高度，但我们没有深入研究它。谢谢你的推荐！您知道flexbox的支持规格吗？