看到一些布局中一边固定宽度，另一边自适应屏幕的问题。总结了两种方法，一种是绝对定位，一种是浮动。
1、绝对定位方法
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> header{ background-color:#09F; height:50px; } main{ position:relative; height:400px; /*关键点1，添加高度，防止左右两侧高度不相等时候，footer上移问题*/ } #left{ margin-right:200px; /*关键点2*/
height:300px; background-color:#066; } #right{ width:200px; height:400px; background-color:#CCC; position:absolute; top:0; right:0; } footer{ height:50px; background-color:#096;} </style> </head> <body> <header>头部</header> <main> <div id="left">左侧区域</div> <div id="right">右侧区域</div> </main> <footer>尾部</footer> </body> </html>
2、浮动方法
<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>左栏固定宽度，右栏自适应之绝对定位法</title> <style type="text/css"> header{ height:50px; background-color:#3FF; } #left{ height:300px; background-color:#9F3; } #right{ float: right; width: 230px; height: 400px; background: #ccc; } footer{ clear:both; /*关键点1*/
height:50px; background-color:#3FF; } </style> </head> <body> <header>头部</header> <main> <div id="right">右侧区域</div> <div id="left">左侧区域</div> /*关键点2，*位置的顺序很重要，如果调换左侧区域和右侧区域的顺序，则右侧区域浮动时，没有漂到left的右侧，而是在left下方的右侧*/ </main> <footer>尾部</footer> </body> </html>
一定要注意DOM的顺序。