Установите несколько div на родительский размер DIV

Question

Это моя структура div. #myMenu Высота динамична, я хочу, чтобы все DIVs вписывались в высоту myMenu. Как мне это сделать?

Я попытался обернуть все divs, которые находятся внутри myMenu внутри другого div, но я не мог добиться того, чего хочу.

#myMenu{ 
    background-color: #f00; 
    height: 600px; /*this value is dynamic*/ 
} 
.gents{ 
    width:100%; 
    padding-bottom:100%; 
    background-size:cover; 
    background-image: url(logo1.png); 
} 
.col{ 
    width: 200px; 
} 

<div id="myMenu"> 
    <div class="col"> 
     <div class="gents"></div> 
    </div> 
    <div class="col"> 
     <div class="gents"></div> 
    </div> 
    <div class="col"> 
     <div class="gents"></div> 
    </div> 
    <div id="other">     
    </div> 
</div> 

EDIT:

Ожидаемый результат (все дивы носку #myMenu):

Answer 1

Это и легко применить следующий CSS даст вам ваш ожидаемый результат:

#myMenu{ 
    background-color: #f00; 
    height: 600px; /*this value is dynamic*/ 
    padding:0; 
    margin:0; 
} 
.gents{ 
    width:100%; 
    padding-bottom:100%; 
    background-size:cover; 
    background-image: url(logo1.png); 
} 
.col{ 
    width: 200px; 
    border:1px solid yellow; 
} 

.col20{ 
    height:20%; 
} 
.col40{ 
    height:40%; 
} 

Check: Fiddle Link Here.