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>

Fiddle
注意：第二个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因此它是超调的。

你应该 NOT DO 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;

向内推以放置文本等

DEMO HERE

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

<强>更新

根据我们不想使用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%;时，这意味着100％的父div的高度是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>

Fiddle

Answer 7

执行height:inherit时，它会获取父div的高度值，这与说height:100%相同。但是这会导致div溢出，因为主容器div中有另一个内部div子节点，其高度等于line-height标签的默认label。您可以尝试将内部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属性执行此操作。 See more

将display:table添加到换行div，将display:table-row添加到子项。

<强> Working Demo

内部div溢出容器

8 个答案:

HTML：

CSS：