可扩展性的页面布局

下面我在总结一下一般的三种扩展布局，这儿所示的扩展布局很常规，有的童鞋会说使用column或者flex啥的布局不是很方便吗，但是你也要看它的支持程度吧，比如你在手机端使用，那当然很好，那我要兼容IE8，IE9呢？

1.左右结构，左边100%；右边宽度固定

HTML代码:

<div id="header"></div><div id="center">    <div id="main_wrapper">        <div id="main"></div>    </div>    <div id="sidebar"></div></div><div id="footer"></div>

css代码：

#header{height:80px; background:#CCC;}#center{overflow:hidden; zoom:1;}#main_wrapper{float:left; width:100%; margin-top:10px; margin-left:-210px;}#main{height:200px; margin-left:210px; background:#999;}#sidebar{float:right; width:200px; margin-top:10px; height:200px; background:#AAA;}#footer{height:50px; margin-top:10px; background:#CCC;}

2.左右结构，左边固定，右边100%

HTML代码:

<div id="header"></div><div id="center">    <div id="sidebar"></div>    <div id="main_wrapper">        <div id="main"></div>    </div></div>

css代码:

#header{height:80px; background:#CCC;}#center{overflow:hidden; zoom:1;}#sidebar{float:left; width:200px; margin-top:10px; height:200px; background:#AAA;}#main_wrapper{float:right; width:100%; margin-top:10px; margin-left:-210px;}#main{height:200px; margin-left:210px; background:#999;}#footer{height:50px; margin-top:10px; background:#CCC;}

3.左中右结构，左边固定，右边固定，中间100%

HTML代码:

<div id="header"></div><div id="center">    <div id="sidebar-l">这里是左边</div>    <div id="main-wrapper">        <div id="main">这里是中间</div>    </div>    <div id="sidebar-r">这里是右边</div></div><div id="footer"></div>

css代码:

#header{height:80px; background:#CCC;}#center{overflow:hidden; zoom:1;}#sidebar-l {float:left; width:200px; margin-top:10px; height:200px; background:#AAA;}#main-wrapper {margin-top:10px; float:left; width:100%; margin-left:-420px; height:200px;}#main {margin-left:438px; background:#999; height:200px;}#sidebar-r {float:right; width:200px; margin-top:10px; height:200px; background:#AAA;}#footer{height:50px; margin-top:10px; background:#CCC;}