內部div溢出容器

Question

我的div內有兩個div 。 我希望第二個div填充到容器的底部。 我嘗試了各種height: 100%; ， height: inherit; height: auto; 等等，並且display css屬性的值不同，但是沒有成功。 請幫忙。
HTML：

<div style='height: 100px; width: 100px; background-color: black; border: 3px solid black;'>
    <div style='background-color: red;'>
        <label>Test</label>
    </div>
    <div style='height: inherit; background-color: green;'>
    </div>
</div>

小提琴
注意：第二個div有一些行，然后有一個頁腳。 我希望根據高度隱藏行。 但是第二個div的頁腳應該可見。
另一個注意事項：
容器是可調整大小的（使用JQuery Re-size）。 因此，我不想設置第二個div的高度。 這將使其靜止。 我希望第二個div具有動態高度。 即總是在容器底部擴大。

Answer 1

嘗試這個

**overflow:hidden;**

<div style='height: 100px; width: 100px; background-color: black; border: 3px solid black;overflow:hidden;'>
    <div style='background-color: red;'>
        <label>Test</label>
    </div>
    <div style='height: inherit; background-color: green;'>
    </div>
</div>

否則，您必須掌握div高度的自動設置，並在內部保留100％的某些內容。

<div style='height: auto; width: 100px; background-color: black; border: 3px solid black;'>
    <div style='background-color: red;'>
        <label>Test</label>
    </div>
    <div style='height: 100%; background-color: green;'>
        &nbsp;
    </div>
</div>

Answer 2

當你做height: inherit; ，目標容器獲取父對象的高度，這就是為什么您的內部綠色div height:100px ，因此它會超調。

您不應該執行overflow：hidden ，因為它會吞噬您的較低內容。

您應該做的是給兩個容器都指定百分比高度，例如

<div id="parentDiv" style='height: 100px; width: 100px; 
                             background-color: black; border: 3px solid black;'>
    <div id="topDiv" style='background-color: red;height:30%'>
        <label>Test</label>
    </div>
    <div id="lowerDiv" style='height: 70%; background-color: green;'>
    </div>
</div>

或使用javascript設置容器的高度，例如

$(window).resize(function(){
      var _heightT= $('#parentDiv').height();
      $('#topDiv').height(_height*0.3);
      $('#lowerDiv').height(_height*0.7);

 })

我建議給您的父容器一個固定的高度（根據窗口大小，通過javascript / jQuery推斷），以便在所有瀏覽器中保持一致，並且您的內部容器的高度百分比是固定的，或者您的頂部容器至少固定一個高度高度，並降低容器的min-height和overflow-y:auto

Answer 3

這樣的事情怎么樣：

HTML：

<div id="con">
    <div id="top">
        <label>Test</label>
    </div>
    <div id="bottom">sdsdfsdfsdfs sdfs dfsdf sdf sd ff</div>
</div>

CSS：

#con {
    height: 200px;
    width: 100px;
    background-color: black;
    border: 3px solid black;
    position: relative;

}
#top {
    background-color: red;
    position: absolute;
    width: 100%;
}
#bottom {
    top: 0px;
    left: 0px;
    background-color: #F5F5F5;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: green;
}

看一看，看看您的想法。 （您將必須使用padding-top: 20px;向下推入內部以放置文本等padding-top: 20px;

此處演示

Answer 4

很簡單：

<div style='overflow:hidden;height: 100px; width: 100px; background-color: black; border: 3px solid black;'>
    <div style='background-color: red;'>
        <label>Test</label>
    </div>
    <div style='height: inherit; background-color: green;'>
    </div>
</div>

Answer 5

UPDATE

據此，我們不想使用overflow:hidden

更新了FIDDLE

<div style='height: auto; width: 100px; background-color: black; border: 3px solid black;'>
    <div style='background-color: red;'>
        <label>Header</label>
    </div>
    <div style='height: 100%; background-color: green;'>
        <label>Body</label>
        <p>Some text here</p>
        <p>Some text here</p>
        <p>Some text here</p>
        <p>Some text here</p>
    </div>
</div>

Answer 6

您可以像建議的那樣使用基於百分比的高度，但是事情是當您將底部div設置為height:100%; 這意味着父div高度的100％為100px，它將移到框外，而您可以將頂部div的高度設置為25％，將底部div的高度設置為75％，如下所示：

<div style='height: 100px; width: 100px; background-color: black; border: 3px solid black;'>
    <div style='height:25%; background-color: red;'>
    <label>Test</label>
    </div>
    <div style='height: 75%; background-color: green;'>
    </div>
</div>

小提琴

Answer 7

當您執行height:inherit ，它將從父div獲取高度值，該值與說height:100% 。 但這會導致div溢出，因為主容器div還有另一個inner-div子級，該子級的高度等於label標簽的默認line-height 。 您可以嘗試給內部div標簽指定單獨的高度：

HTML ：（與您的標記相同，只是添加類，因此您不必給出內聯樣式）

<div class="p">
    <div class="c1">
        <label>Test</label>
    </div>
    <div class="c2"></div>
</div>

CSS ：

.p {
    height: 100px;
    width: 100px;
    background-color: black;
    border: 3px solid black;
}
.c1 {
    height:20%;
    background-color: red;
}
.c2 {
    height: 80%;
    background-color: green;
}

DEMO

Answer 8

您可以使用CSS中的display:table屬性來執行此操作。 查看更多

將display:table添加到wrap div並為子級添加display:table display:table-row 。

工作演示