的类。

那是HTML代码。

<代码><；DIV类="；主容器"；>；<；DIV类="；全高-DIV"；>；<；/DIV>；<；DIV类="；主要内容"；>；<；/DIV>；<；/DIV>；

这就是CSS代码。

<代码>正文，HTML{保证金：0；高度：100%；}.main-container{显示：Flex；高度：100%；}.全高-DIV{高度：100%；}

顺晟科技：

听起来你想要<div class="main-container"> <div class="full-height-div"> </div> <div class="main-content"> </div> </div> 为其父级的高度。

body, html { margin: 0; height: 100%; } .main-container { display: flex; height: 100%; } .full-height-div { height: 100%; } 需要<div class="full-height-div">，而不是.main-container。

在此示例中，<div class="main-container"> <div class="full-height-div"> </div> <div class="main-content"> </div> </div> （红色轮廓）采用其父height: 100%（绿色轮廓）的高度。

<代码>正文，HTML{保证金：0；高度：100%；}.main-container{显示：Flex；flex-direction：行；边框：5px纯绿色；宽度：100%；}.全高-DIV{高度：2000px；/*只是为了强制它比本例中的视口高*/边框：1px纯红色；宽度：100%；}

<代码><；DIV类=“ main-container ”>；<；DIV类=“全高-DIV ”>；<；/DIV>；<；DIV类=“ main-content ”>；<；/DIV>；<；/DIV>；

这个问题在这里得到了回答：我怎样才能让Flexbox孩子的身高达到父母的100%？

<代码>正文，HTML{保证金：0；高度：100%；}.全高-DIV{高度：100VH；背景颜色：蓝色；}.main-container{显示：Flex；背景颜色：红色；}

<代码><；DIV类=“ main-container ”>；<；DIV类=“全高-DIV ”>；满<；/DIV>；<；DIV类=“ main-content ”>；主要的<；/DIV>；<；/DIV>；

<代码>.全高-DIV{高度：100VH；}