Mehrere Blöcke mit 100% Höhe in HTML

Question

Ich verstehe, dass das Elternelement auf eine feste Höhe festgelegt werden muss, um eine prozentuale Höhe zu verwenden? zB 500px.

Ich baue ein Raster, in dem es eine Hierarchie von divs gibt. Der Elternteil hat eine feste Höhe von 500 Pixeln, und die Kinder haben eine prozentuale Höhe von jeweils 33,333%. Diese Kinder haben dann eine Reihe von Kindern, von denen jedes eine prozentuale Höhe von 100% des Elternteils geben soll.

Kennt jemand einen Weg um dies?

Answer 1

Kennt jemand einen Weg um dies?

Eine alternative Methode ist Flexbox mit flex-grow zu verwenden, so dass Kinder wachsen ihre Eltern

* {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>