适合多个div的父DIV高度

Question

这是我的div结构。 #myMenu高度是动态的，我想让所有DIV都适合myMenu的高度。我怎么做？

我尝试将myMenu内的所有div包裹在另一个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>

修改

预期输出（所有div都适合#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%;
}

检查：Fiddle Link Here.