内部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 。

工作演示