HTML中的多个100％高度块

Question

我知道，为了使用基于百分比的高度，父元素必须设置为固定高度？例如500px。

我正在构建一个网格，其中有一个div的层次结构。父母的固定身高为500px，孩子的身高百分比为33.333％。这些孩子然后有一组孩子，每个孩子我都想给它的父母百分之百的高度。

任何人都知道解决这个问题的方法？

Answer 1

任何人都知道解决这个问题的方法？

的另一种方法是使用Flexbox的与flex-grow，使孩子的成长，以填补他们的父母

* {margin:0;} 
 
section { 
 
    height: 100vh; 
 
} 
 
section,div { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
div,p { 
 
    flex-grow: 1; 
 
    flex-basis: 0; 
 
} 
 
p { 
 
    background: #eee; 
 
} 
 
div:nth-child(even) p { 
 
    background: #ccc; 
 
}

<section> 
 
    <div> 
 
    <p>text</p> 
 
    </div> 
 
    <div> 
 
    <p>text</p> 
 
    </div> 
 
    <div> 
 
    <p>text</p> 
 
    </div> 
 
</section>