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

【问题标题】：How to get Outer div to Grow alongside Inner div如何让外部 div 与内部 div 一起增长
【发布时间】：2012-11-16 04:54:31
【问题描述】：

我有一个容器 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>

这是 CSS：

#containerDiv {
    background-image: url('/Content/images/backgroundimage.png');
    min-height: 760px;
    width: 100%;
    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: 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: absolute;
    background-color: white;
}

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

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

基于this 解决方案，我尝试将溢出属性设置为自动（在容器中），但没有成功。基于this 解决方案，我尝试将容器的属性浮动设置为向左。这也不起作用。我也尝试在此行之后添加

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

（意思是在关闭内部div之前），根据另一个post添加这一行

<div style="clear:both;"></div>

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

【问题讨论】：

标签： html

【解决方案1】：

将overflow: auto 更改为overflow: hidden。应该可以的。

#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;  // <-------
}

【讨论】：

加+1，因为即使它不是完整的解决方案，它也是必要的。

【解决方案2】：

如果您的 innerDiv 向右或向左浮动，通常会发生这种情况。您似乎没有添加 innerDiv 的类定义。通常解决这个问题的方法是在 innerDiv 的结束标记之后添加（而不是在它之前）。

【讨论】：

感谢您指出这一点，我感到困惑并错误地命名了该类

【解决方案3】：

好的，问题似乎是innerDiv的位置：绝对属性。我把它改成相对的，它起作用了。以下是相关的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>

还有CSS：

#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/

【讨论】：