网页布局自适应的布局方法

<!--方法一-->
<style type="text/css">
        html,body{margin:0; height:100%;}
        #main{height:100%; margin:0 21%; background:#ffe6b8;}
        #left,#right{width:20%; height:100%; background:#a0b3d6;}
        #left{float:left;}
        #right{float:right;}
    </style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
</body>

<!--方法二-->
<style type="text/css">
        html,body{margin:0; height:100%;}
        #main{width:100%; height:100%; float:left;}
        #main #body{margin:0 21%; background:#ffe6b8; height:100%;}
        #left,#right{width:20%; height:100%; float:left; background:#a0b3d6;}
        #left{margin-left:-100%;}
        #right{margin-left:-20%;}
    </style>
</head>
<body>
<div id="main">
    <div id="body"></div>
</div>
<div id="left"></div>
<div id="right"></div>
</body>

<!--方法三-->
<style type="text/css">
        html,body{margin:0; height:100%;}
        #left,#right{position:absolute; top:0; width:20%; height:100%;}
        #left{left:0; background:#a0b3d6;}
        #right{right:0; background:#a0b3d6;}
        #main{margin:0 21%; background:#ffe6b8; height:100%;}
    </style>
</head>

<body>
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>
</body>


参照：http://www.zhangxinxu.com/wordpress/?p=370
参照：http://www.zhangxinxu.com/wordpress/?p=370