网页布局自适应的布局方法
网页布局自适应的布局方法
<!--方法一--> <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
