使DIV高度延伸到父母的底部DIV

Question

我有一個DIV出現在父母的潛水下面的一些文本中。我想讓div擴展到父div的底部。父div被重複多次並且文本數量不同，所以kid div的開頭位置發生了變化。

我無法找到任何形式的方式來簡單地做一個潛水程度自動，直到它擊中了父母，也能夠做一個：

margin: 70%; 

，但有這個只適用於頂部與其中的文本相對的母公司也會很好。

這個小提琴是一個很好的例子，我希望DIV 1c可以擴展到DIV1的底部，所以如果我要改變任何其他DIV的高度，它會自動調整。 http://jsfiddle.net/7ZGaG/5/

與區域問題相關的文章和資料覈實完整的HTML：

<article class="bookcover"> 
         <div class="info"> 


          <h2>'.$row->BookName.'</h2>     
          <p class="authors"><b>Written By:</b> ';while ($Authors = mysql_fetch_object($Aresult)){echo $Authors->Forename.' '.$Authors->Surname.', ';}echo"<br><b>Release Year: </b>".$row->PublishDate = substr($row->PublishDate, 0, -6).'<br> 
          <b>Genre:</b> '  ;while ($Genres = mysql_fetch_object($Gresult)){echo $Genres->Genre.', ';}echo"".'</p></footer> 

          <div id="Plot'.$row->BookID.'"> 
           <table>             
           <tr><td>'.$row->Plot.'</td></tr>          
           </table> 

          </div> 

          <div class="detailsContainer"> 

           <a href="javascript:unhide(\'BookDetails'.$row->BookID.'\');"> 
           <div class="detailview"><b>Book Details<br></a></div> 

             <div id="BookDetails'.$row->BookID.'" class="hidden"> 
              <table> 
              <tr><td>Total Stock </td><td>'.$row->TotalStock.'</td> 
              <td>Current Stock</td><td>'.$row->CurrentStock.'</td></tr> 
              <tr><td>Awards </td><td>'.$row->Awards.'</td> 
              <td>Film</td><td>'.$row->Film.'</td></tr> 
              </table> 
             </div> 

         ';?> 


           <br><center><a href = "javascript:void(0)" 
           onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"> 
           <div class= "obutton feature2">Reserve Book</div></a></center>         
           <div id="light2" class="white_content"></div> 
           <div id="fade" class="black_overlay"></div>     
          </div> 
        </div> 


         <?php echo '<div class="image"> 
          <img src='.$row->BookCover.'> 
         </div> 
        </article> 

CSS：

.bookcover { 
    width: 30%; 
    max-height: 500px; 
    overflow: hidden; 
    background:#ccc; 
    position:relative;  
    display: inline-block; 
    margin-bottom: 1%; 
    margin-left: 1%; 
    margin-right: 1%; 
    margin-top: 1%; 
} 
.info { 
    width:90%; 
    height:90%; 
    margin:5%; 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1; 
    background: rgba(204,204,204,0.92); 
    transition:opacity 0.5s; 
    opacity:0; 
} 
.bookcover .image { 
    text-align:center; 
    position:relative; 
    top:5%; 
} 
.bookcover:hover .info{ 
    opacity:1; 
} 

.authors 
{ 
    font-style: italic; 
    color: #666; 
    font-size: 90%; 
} 

.detailsContainer 
{ 
    width: 100%; 
    height: 25%; 
    overflow: hidden; 
    position: relative; 
} 

.detailview 
{ 
    width: 30%; 
    height: 29px; 
    background-color: rgba(204,204,204,0); 
    text-align: center; 
    display: inline-block; 
} 

.obutton 
{ 
    text-align: center; 
    font-weight: bold; 
    width: 100%; 
    height: 29px; 
    background:rgba(204,204,204,0); 
    position: absolute; 
    bottom: 0; 
    color: #666; 
} 

Answer 1

在你的榜樣，你對父母和1a和靜態高度1B。這意味着你可以使用最小高度preoperty：

.div1 { 
    background: wheat; 
    width: 150px; 
    height: 400px; 
} 
.div1a { 
    height: 150px; 
    background: blue; 
} 
.div1b { 
    height: 150px; 
    background: red; 
} 
.div1c { 
    background: pink; 
    min-height: 100px; 
} 

Fiddle Here

Answer 2

你可以試試這個辦法還，默認高度與溢出的自動所以做出這些改變.. Fiddle demo

.div1 { 
background: wheat; 
width: 150px; 
height: 300px; 
overflow:hidden; 
} 
.div1a { 
height: 100px; 
background: blue; 
} 
.div1b { 
height: 100px; 
background: red; 
} 
.div1c { 
height:inherit;  
background: pink; 
}