Question

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

我有两个侧栏的基本布局和一个“maincontent”div，它们都包含在“包装”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在内容中调整高度，我添加了一个带有style =“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;
}

尝试一下，让我知道它是否有用。

问候。

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

1 个答案: