高度使用父股利

Question

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

CSS的100％

.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高度之后。 不想使用100%其父分区.img-blocks的高度。

Answer 1

您可以将height:100%添加到您已拥有的.img-blocks-images。但是这会让它溢出父div。因此，将overflow:hidden添加到父div。

如果高度动态变化

下面这将工作，即使是拨弄

DEMO

Answer 2

如果.img-blocks-header有一个固定的高度，就可以绝对位置，并和给.img-blocks-images的顶边距33px（标题高度）加上预期的填充（10px） - > 43px。这样，.img-blocks-images 100％的高度将始终与其父母匹配。

的演示小提琴：

http://jsfiddle.net/Lv6hF/