Html 如何让外部div与内部div一起增长

我有一个容器div，里面有一个内部div。我希望我的外部div与其内部div的内容一起增长（高度）。我已经设置了最小高度，但是外部div的大小从来没有与我设置的最小高度不同

这是html：

<div id="containerDiv">
    <div class="innerDiv">
        <div id="header" class="layout">...</div>
        <div id="mainMenu" class="layout">...</div>
        <div id="content" class="layout">...</div>
        <div id="footer" class="layout">...</div>
    </div>
</div>

这把小提琴应该有助于了解我的问题。红色div的高度应与白色div的高度相同。宽度还可以，应该是100%

http://jsfiddle.net/arrsoph87/euB8H/

基于解决方案，我尝试将溢出属性设置为自动（在容器中），但没有成功。 基于这个解决方案，我尝试将容器的属性float设置为左侧。这也没用。 我也试着在这行后面加上

<div id="footer" class="layout">...</div>

。。。

（意思是，在关闭内部div之前），基于另一行添加此行

---

也没法让它工作。有什么建议吗？

如果innerDiv向右或向左浮动，通常会发生这种情况。您似乎没有添加innerDiv的类定义。

---

通常，解决方法是在innerDiv的结束标记之后（而不是之前）添加。

将

溢出：自动

更改为

溢出：隐藏

。那应该有用

#containerDiv {
    background-image: url('/Content/images/backgroundimage.png');
    min-height: 760px;
    width: 100%;
    border-radius: 1px;
    -webkit-border-radius: 1px;
    -o-border-radius: 3px;
    box-shadow: 0 96px 86px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);

    overflow: hidden;  // <-------
}

#containerDiv{
背景图像：url（'/Content/images/backgroundimage.png'）；
最小高度：760像素；
宽度：100%；
边界半径：1px；
-webkit边界半径：1px；
-o-边界半径：3px；
盒影：096px86pxRGBA（0,0,0,0.3）；
-webkit盒阴影：0 3pxRGBA（0,0,0,0.3）；
溢出：隐藏；//好的，问题似乎是innerDiv的position:absolute属性。我将其更改为relative，它就工作了。下面是相关的HTML：

<div id="containerDiv">
    <div class="innerDiv">
        <div id="header" class="layout">HEADER</div>
        <div id="mainMenu" class="layout">MAIN MENU</div>
        <div id="content" class="layout">CONTENT</div>
        <div id="footer" class="layout">FOOTER</div>
    </div> 
</div>​

#containerDiv
{
    background-image: url('/Content/images/backgroundimage.png');
    min-height:760px;
    width: 100%;
    border-radius: 1px;
    -webkit-border-radius: 1px;
    box-shadow: 0 96px 86px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    overflow:hidden; /*added*/
    /* removed overflow:auto; */
}
.innerDiv
{
    border-radius: 1px;
    -webkit-border-radius: 1px;
    box-shadow: 0 0 86px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    position: relative; /*added*/
    /*removed position:auto;*/
    left:230px; /*added*/
    background-color:white;
    width: 100px;
}​

我把它放在这把新小提琴里

http://jsfiddle.net/arrsoph87/BC5n8/

感谢您指出这一点，我感到困惑，并将该类命名为incorrectlyPlus+1，因为即使它不是完整的解决方案，它也是必要的。
#containerDiv
{
    background-image: url('/Content/images/backgroundimage.png');
    min-height:760px;
    width: 100%;
    border-radius: 1px;
    -webkit-border-radius: 1px;
    box-shadow: 0 96px 86px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    overflow:hidden; /*added*/
    /* removed overflow:auto; */
}
.innerDiv
{
    border-radius: 1px;
    -webkit-border-radius: 1px;
    box-shadow: 0 0 86px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    position: relative; /*added*/
    /*removed position:auto;*/
    left:230px; /*added*/
    background-color:white;
    width: 100px;
}​

http://jsfiddle.net/arrsoph87/BC5n8/