这是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;
}
我在所有内容上都加了边框，以便您可以看到问题。
该#wrapperDIV不包含绝对定位#aside-left和#aside-right申报单。为什么这些侧边栏div绝对定位？因为#maincontentdiv的大小根据用户的分辨率水平/流体地增加，而侧边栏保持相同的大小。（如果您想了解更多，这是我原来的布局问题CSS百分比和像素布局的总和）
我该怎么做才能确保布局不中断（即，具有#maincontent固定的左右侧边栏的流体中心div），但可以#wrapper调整高度以包含所有元素？如果可能的话，我想避免使用Javascript。
是否有类似于'clearfix'的东西，以使相对定位的容器调整为绝对位置div的高度？我不知道绝对定位的div的高度，因为它们的内容是动态创建的。
我看过您的问题，这似乎可以解决问题：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;
}
试试看，让我知道它是否有用。
问候。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句