Question

我有一个容器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应与白色高度相同。宽度没问题，应该是100％。

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

基于this解决方案，我尝试将overflow属性设置为auto（在容器中），没有运气。根据{{3}}解决方案，我尝试将容器的属性float设置为left。这也不起作用。我也试过在这一行后添加

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

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

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

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

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

Answer 2

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

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

如何让外部div与Inner div一起成长

3 个答案: