<div class="1"> <div class="2"></div> <div class="3"></div> </div>

Make blocks 2 and 3 the same height as a percentage. They should be displayed horizontally, i.e. each other and stretch in height depending on the height of the parent

  • "horizontally, i.e. under each other", maybe vertically? - Eduard Misk

2 answers 2

If the number of blocks is known, then you can simply specify the height value in percent 100 / n, where n is the number of blocks.

Here is an example .

     body { margin: 0; } .home { height: 100vh; max-width: 600px; } .section { width: 100%; height: 33.333%; } .y { background-color: yellow; } .b { background-color: blue; } .g { background-color: lightgreen; } 
     <div class="home"> <div class="section y"></div> <div class="section b"></div> <div class="section g"></div> </div>