html - 高度使用父 Div 的 100%

Question

<div class="img-blocks">
  <div class="img-blocks-header"></div>
  <div class="img-blocks-images"></div>
</div>

CSS

.img-blocks{
    width:984px ;
    height:265px;
    margin: 0 auto;
    background: white;
    border-radius:7px ;
    margin-bottom: 15px;
}
.img-blocks-header{
    width:100% ;
    height: 33px;
    background: #c8c2c2;
    border-radius:7px 7px 0px 0px;
    text-align: center;
    color: white;
}
.img-blocks-images{
    width:100%;
    height:100%;
    padding:10px 0px 10px 0px;
    border:1px dotted black;


}

我希望带有 .img-blocks-images 类的 div 使用可用高度的 100% 即在扣除 的高度之后.img-block-header 来自 parent 。不想使用其父 div .img-blocks 的 100% 高度。

Answer 1

您可以将 height:100% 添加到您已有的 .img-blocks-images 中。但这会使它溢出父 div。所以将 overflow:hidden 添加到父 div。

即使高度动态变化也能正常工作

这是 fiddle

DEMO