Question

我有一个带有容器div的页面，它包含三个额外的div，如下所示：

<div id="container>
   <div id="top"></div>

   <div id="content"> 
    <!-- Dynamic content placed here auto expands this div  -->
   </div

   <div id="bottom"> Copyright logo </div>

</div>

和我的CSS：

    #containerDiv {
        position: relative; 
        right: 425px !ie7; 
        width: 910px; 
        margin: 0px auto;
    }

    #top {
        background: url(../images/top_width956px.gif) top center no-repeat;
        height: 39px;
        line-height: 0;
        margin: 0px auto;
        width: 956px;
        position: relative;
        left: 19px;
    }

    #content {
        position: relative;
        margin: 20px 201px 20px 201px;
        border-right: 1px solid #333333;
        border-bottom: 1px solid #333333;
        border-left: 1px solid #333333;
        background: #ffffff;
        color: #333333;
        padding: 20px;
        z-index: 3;
    }

#bottom {
height: 161px;
color: #666;
font-size: 80%;
padding: 20px;
margin: 0 auto;
width: 908px;
}

我的问题是我有动态内容加载到“内容”div中，这导致它重叠到“底部”div。我不想隐藏内容，因此溢出：隐藏不是一个选项。我正在寻找的行为是，如果内容扩展了中间div，它应该推动“底部”div。我不知道如何实现这一目标。任何帮助表示赞赏。

更新：

谢谢大家的帮助。事实证明，“content”div有一个内联样式，它有几个与css文件中的样式冲突的内联样式;一位同事一直致力于此，我没有注意到所有其他内容中的内联风格。其中一个将位置设置为“绝对”，我删除了它，它似乎解决了问题。我还将其余的内联样式移动到css文件中这是我的代码的更新版本：

更新了CSS：

#containerDiv {
    position: relative; 
    right: 425px !ie7; 
    width: 910px; 
    margin: 0px auto;
}

#top {
    background: url(../images/top_width956px.gif) top center no-repeat;
    height: 39px;
    line-height: 0;
    margin: 0px auto;
    width: 956px;
    position: relative;
    left: 19px;
}

#center-col {
    position: relative;
    margin: 0px;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #333333;
    background: #ffffff;
    color: #333333;
    padding: 20px;
    z-index: 3;
    width: 908px;
    text-align: center;
    margin-right: auto; 
    margin-bottom: 75px; 
    margin-left: auto;
    visibility: visible;
}

#bottom {
    height: 161px;
    color: #666;
    font-size: 80%;
    padding: 20px;
    margin: 0 auto;
    width: 908px;
    position: relative;
    bottom: 0px;
}

很抱歉与上面的html混淆，我手工输入它只是为了给我的页面布局快速而肮脏的例子。我的实际html文件包含更多内容，我可能会添加它格式正确。

Answer 1

更改此

<div id="container>
   <div id="top"></div>

   </div id="content"> 
    <!-- Dynamic content placed here auto expands this div  -->
   </div

   <div id="bottom"> Copyright logo </div>

</div>

到此

<div id="container">
   <div id="top"></div>

   <div id="content"> 
    <!-- Dynamic content placed here auto expands this div  -->
   </div>

   <div id="bottom"> Copyright logo </div>

</div>

HTML 4.0严格是STRICT

然后在CSS文件上使用正确的标签......

Answer 2

当你有正确的语法时它会...看一下这个http://jsfiddle.net/5uSc7/1/

容器div中的多个div

2 个答案: