高度使用父股利

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/