CSS扩展DIV并将其他元素向下推

Question

我有一堆DIV。在这些div内部是可展开的jquery面板，放置在这些div内部。当面板扩展时，如果它比包含它的div大，我希望它能够扩展。我一直在尝试这里无休止的建议，但我的CSS有问题。谢谢任何帮助。我想知道是否是我的position:absolute造成的问题。我需要锁定顶部和左侧属性，但div可以向下扩展，我只想让它们将下面的div一起向下推。

#framecontent{
        position: absolute;
        top: 0;
        bottom: 0; 
        left: 0;
        width: 815px; /*Width of frame div*/
        height: 600px;
        overflow: auto; /*Disable scrollbars. Set to "scroll" to enable*/
        overflow-x: hidden;
        background-image: url('../images/Bkgrnd.png');
        background-repeat:repeat-x; 
}


#listcontainer{
        position:absolute;
        width: 260px;
        margin-top: 70px;
        margin-left:40px;
}

/* Main Header */
#headercontent{
        position:absolute;
        background: #3e3e3e;
        top:0px;
        height: 65px;
        width: 615px;
        position: fixed;
        left: 200px;
}

#subheading1 {      
        position: absolute;
        background: #585858;
        top: 65px;
        height: 45px;
        width: 615px;
        left: 200px;
        color:#ffffff;
}

#response{
        position: absolute;
        background: #585858;
        top: 110px;
        min-height: 115px;
        width: 615px;
        left: 200px;
        color:#ffffff;
        /* box-shadow:inset 5px 5px 2px  #000000;  */
}

#subheading2 {      
        position: absolute;
        background: #313131;
        top: 225px;
        height: 45px;
        width: 615px;
        left: 200px;
        color:#ffffff;
}

#summary {
        position: absolute;
        background:  #454545;
        top: 270px;
        height: 375px;
        width: 615px;
        left: 200px;


}

- rd42

---

你能把div和css的例子粘贴在这里并点击运行吗？http://jsfiddle.net/ - Niklas

不相关，但是#headercontent有两个位置属性。我会说这与绝对定位有关，或者与您页面上的所有内容似乎都具有固定宽度和高度有关，这意味着它不会扩展。 - Alex

如上所述，请将您的HTML、CSS和jQuery放入http://jsfiddle.net/中，也许我们可以更好地看到出了什么问题。 - Deadlykipper

是的，去掉绝对定位并使用边距有所帮助。我卡在一个可扩展的jQuery面板中，当我展开它时，我希望div也能扩展。也许我应该在CSS中查找扩展面板。谢谢大家的帮助。 - rd42

我去掉了高度，这样就解决了扩展问题。 - rd42

Answer 1

仅凭一小段 CSS 代码，很难说出你的 HTML 具体实现了什么功能。

但从你展示的内容来看，似乎是一个定位问题。尝试将 CSS 中的绝对定位去掉，看看会发生什么。

- Sven Bieder

Answer 2

只需从CSS中删除所有position:absolute。然后，如果您想将其与其他内容对齐，可以使用margin、padding和float...

请提供更多关于您的HTML文件的细节，我可以为您提供更多帮助。

- KimKha