0

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

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

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

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

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

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

4

3 回答 3

2

更改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-15T18:46:34.903 回答
0

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

于 2012-11-15T18:42:13.447 回答
0

好的，问题似乎是位置：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-15T19:33:53.190 回答