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;


}

我希望div课程.img-blocks-images使用可用身高的100%，即从父母那里扣除.img-block-header的高度后。不想使用其父div 100%的{{1}}高度。

Answer 1

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

即使高度动态变化，这也会有效

这是小提琴

DEMO

Answer 2

如果.img-blocks-header有一个固定的高度，你可以绝对定位它，并给.img-blocks-images一个33px的顶部填充（标题高度）加上预期的填充（10px） - ＆gt; 43px。这样，.img-blocks-images 100％高度将始终与其父级匹配。

演示小提琴：

http://jsfiddle.net/Lv6hF/

高度使用100％的父级

2 个答案: