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>