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

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

这是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属性为自动（容器），没有运气。根据this解决方案，我尝试将容器的属性float设置为left。这也没有用。我也尝试过这条线

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

后加入权（意思是，右关内的div之前）基础上添加另一个post

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

该行还不能得到这个工作。有什么建议么？

来源

2012-11-15 Soph

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

来源

2012-11-15 18:42:13

感谢您指出了这一点，我糊涂了，并命名为类错误地 – Soph

变化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; // <------- 
}

来源

2012-11-15 18:46:34

加+1监守，即使它不是完整的解决方案，这也是必要的。 – Soph

好的，问题似乎是：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/

来源

2012-11-15 19:33:53 Soph

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

回答

相关问题