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>

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

：

-----------------------------------------------------------------------------------------------------------------------------------------------原理圖：
---------- 左固定，右展開 ----------
---------- 右固定，左展開 ----------