html - 使多个 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.