使相对定位的 div 包含所有绝对定位的子 div

Question

这里是 JSFiddle：http://jsfiddle.net/nN5Td/

我有两个侧边栏和一个“maincontent”div 的基本布局，它们都被包裹在一个“wrapper”div 中。这是 HTML：

<div id="wrapper">
    <div id="aside-left">
        <ul>
            <li>Link1</li>
            <li>Link2</li>
            <li>Link3</li>
        </ul>
    </div>
    <div id="maincontent">
        <p>All content goes in here.</p>
    </div>
    <div id="aside-right">
        <ul>
            <li>Link1</li>
            <li>Link2</li>
            <li>Link3</li>
        </ul>
    </div>
</div>

这是 CSS：

#wrapper {
    margin-right: auto;
    margin-left: auto;
    background-color: #FFF;
    position: relative;
    min-height:200px;
    border: 1px solid #F0F;
}
#aside-left {
    position: absolute;
    height: 400px; /* guess */
    width:100px;
    top: 0;
    left: 0;
    border: 1px solid #9C0;
}
#maincontent {
    margin: 0 130px;
    border: 1px solid #9C0;
}
#aside-right {
    position: absolute;
    height: 400px; /* guess */
    width:100px;
    top: 0;
    right: 0;
    text-align: right;
    border: 1px solid #9C0;
}

我对所有内容都设置了边框，以便您可以看到问题。

#wrapper div 不包含绝对定位的 #aside-left 和 #aside-right div。为什么这些侧边栏 div 是绝对定位的？因为#maincontent div 的大小会根据用户的分辨率水平/流畅地增长，而侧边栏的大小保持不变。 （如果你想了解更多，这里是我原来的布局问题CSS percentage and pixel layout combined）

我能做些什么来确保布局不会中断（即，有一个流动的#maincontent 中心 div 和固定的左右侧边栏）但让#wrapper 调整高度以包含所有元素？如果可能，我想避免使用 Javascript。

有什么类似于'clearfix'的东西可以使相对定位的容器调整到绝对位置div的高度吗？我无法知道绝对定位的 div 的高度，因为它们的内容是动态创建的。

Answer 1

我查看了您的问题，这似乎可行：http://jsfiddle.net/qKP2v/3/。

基本上，我将您的两列移至#maincontent，因此它们可以与“实际内容”一起流动。

然后，为了将列与内容本身分开，我将内容放在 div 元素中。

为确保#maincontent 调整内容的高度，然后我添加了一个样式为“clear:both”的div，因此#maincontent 和#wrapper 的高度被拉伸到列/内容高度。

这是您调整后的 HTML：

<div id="wrapper">   
    <div id="maincontent">
        <div id="aside-left">
            <ul>
                <li>Link1</li>
                <li>Link2</li>
                <li>Link3</li>
            </ul>
        </div> 
        <div id="aside-right">
            <ul>
                <li>Link1</li>
                <li>Link2</li>
                <li>Link3</li>
            </ul>
        </div>       
        <div id="content">
            <p>All content goes in here.</p>
        </div>  
        <div style="clear:both;"></div>
    </div>
</div>

还有你调整后的 CSS：

#wrapper {
    width:100%;
    margin: 0 auto;
    background-color: #FFF;
    min-height:200px;
    border: 1px solid #F0F;
}
#aside-left {
    height: 400px; /* guess */
    float:left;
    width:100px;
    top: 0;
    left: 0;
    border: 1px solid #9C0;
}
#maincontent {
    border: 1px solid #9C0;
    width:100%;
}
#maincontent #content{
    margin:0 130px;
    border: 1px solid red;
}
#aside-right {
    height: 400px; /* guess */
    float:right;
    width:100px;
    top: 0;
    right: 0;
    text-align: right;
    border: 1px solid #9C0;
}

试试看，如果有用，请告诉我。

问候。