CSS两列全屏可伸缩布局

CSS两列全屏可伸缩布局

-----------------------------------------------------------------------------------------------------------------------------------------------

<div style="float:left;width:100%; background-color:#9FF;">
<div style="margin-right:200px; background-color:#CF9;">
内容内容内容内容内容<br/>
内容内容内容内容<br/>
内容内容内容<br/>
内容内容<br/>
内容<br/><br/><br/><br/><br/>
</div>
</div>


<div style="float:left;width:200px;margin-left:-200px; background-color:#C3F;">
导航导航导航导航导航<br/>
导航导航导航导航<br/>
导航导航导航<br/>
导航导航<br/>
导航
</div>


<div style="clear:left; background-color:#666;">脚</div>

-----------------------------------------------------------------------------------------------------------------------------------------------

<div style="background-color:#CCC;">
<div style="float:right; width:100%;">
<div style="margin-left:200px; background-color:#FFC;"><p>右侧栏</p><p>可伸缩宽度</p></div>
</div>
<div style="float:right; width:200px; margin-right:-200px; background-color:#9CF;"><p>左侧栏</p><p>固定宽度</p></div>
<div style="clear:both;"></div>
</div>
<hr/>
<div style="background-color:#CCC;">
<div style="float:left; width:100%;">
<div style="margin-right:200px;background-color:#FFC;"><p>左侧栏</p><p>可伸缩宽度</p><p>左侧栏</p><p>可伸缩宽度</p></div>
</div>
<div style="float:left;width:200px; margin-left:-200px;background-color:#9CF;"><p>右侧栏</p><p>固定宽度</p><p>右侧栏</p><p>固定宽度</p></div>
<div style="clear:both;"></div>
</div>

-----------------------------------------------------------------------------------------------------------------------------------------------

效果图：

-----------------------------------------------------------------------------------------------------------------------------------------------

原理图：

---------- 左固定，右拉伸 ----------

---------- 右固定，左拉伸 ----------