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

Question

我有一個DIV，它出現在父母的潛水波紋管中，里面有一些文字。 我希望div擴展到父div的底部。 父div重復多次，並且文本數量不盡相同，因此，小div的最高開始位置會發生變化。

我找不到任何一種方法可以簡單地使潛水范圍自動下降，直到它撞到父級，而且還可以執行以下操作：

margin: 70%;

但這僅適用於父級div的頂部，而不是內部文本也很有效。

這個小提琴是一個很好的例子，說明了我希望DIV 1c擴展到DIV1的底部，因此，如果我要更改其他DIV的高度，它將自動調整。 http://jsfiddle.net/7ZGaG/5/

與相關區域相關的文章和DIV的完整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的靜態高度都為靜態。 這意味着您可以使用最小高度預操作：

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

小提琴在這里

Answer 2

你可以試試這個方法也默認高度和溢出是自動所以做出這些改變.. 小提琴演示

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