Question

我有一个DIV出现在父母潜水中，其中有一些文字。我希望div扩展到父div的底部。父div重复多次并且具有不同的文本量，因此kid 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上具有静态高度。这意味着你可以使用min-height 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;  
}

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

2 个答案: