一、右边固定左边自适应布局
右边的元素浮动
网页的渲染和网页的机构有很大的关系，最先出现的元素最先显示，右边的元素设置右浮动，左边的元素不浮动，但是设置margin-right，设置的值为右边元素的宽度。
CSS
| 代码如下 | 复制代码 |
|
#nav { width: 200px; float: right; overflow: hidden; } #content-wrapper { margin-right: 200px; } HTML <div id="nav"> |
|
这种布局，菜单栏会出现在正文的上方，最先加载，但是如果是一些其它的内容，对seo优化不是很好。
css的负边距（negative margin）
这个方法是将一个宽度为100%的div的外边距（left-margin or right-margin）设置为某个负值，然后将其第一个子div的外边距（与父容器的边距同方向）设置为对应的正值，那么这个div就可以浮动并且自 适应浏览器宽度。
CSS代码
| 代码如下 | 复制代码 |
|
#nav { width: 200px; float: right; } #content-wrapper { margin-right: -200px; float: left; width: 100%; } HTML代码 <div id="content-wrapper"> |
|
这个例子还使用了一个css“hack”技术，那就是使用psuedo css清除浮动造成的父容器高度不会自动撑大的问题
二、左边固定 右边自适应
其一，左栏固定宽度，右栏自适应之对定位法：
| 代码如下 | 复制代码 |
| <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>左栏固定宽度，右栏自适应之绝对定位法</title> <style type="text/css"> body{ margin: 0; } #nav{ top: 0; left: 0; width: 230px; height: 600px; background: #ccc; position: absolute; } #main{ height: 600px; margin-left: 230px; background: #0099ff; } </style> </head> <body> <div id="container"> <div id="nav"> 左栏 </div> <div id="main"> 右栏 </div> </div> </body> </html> |
|
看起来很美好，但是。。
由于左栏使用绝对定位，脱离了文档流，因此有一个缺陷，即当左栏高度大于右栏时，无法将container撑开，这个缺陷单单只看两栏布局并没有太大影响，但如果两栏布局下面有一个底栏，就会出现底栏与左栏重叠的情况：
| 代码如下 | 复制代码 |
| <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>左栏固定宽度，右栏自适应之绝对定位法</title> <style type="text/css"> body{ margin: 0; } #nav{ top: 0; left: 0; width: 230px; height: 600px; background: #ccc; position: absolute; } #main{ height: 400px; margin-left: 230px; background: #0099ff; } #footer{ text-align: center; background: #009000; } </style> </head> <body> <div id="container"> <div id="nav"> 左栏 </div> <div id="main"> 右栏 </div> </div> <div id="footer"> 底栏 </div> </body> </html> |
|
我们再来看看第二种方法，左栏固定宽度，右栏自适应之负margin法：
| 代码如下 | 复制代码 |
| <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>左栏固定宽度，右栏自适应之负margin法</title> <style type="text/css"> body{ margin: 0; } #container{ margin-left: 230px; _zoom: 1; /*兼容IE6下左栏消失问题*/ } #nav{ float: left; width: 230px; height: 600px; background: #ccc; margin-left: -230px; position: relative; /*兼容IE6下左栏消失问题，IE6真不让人省心啊>_<*/ } #main{ height: 600px; background: #0099ff; } </style> </head> <body> <div id="container"> <div id="nav"> 左栏 </div> <div id="main"> 右栏 </div> </div> </body> </html> |
|
这样无论两栏的高度如何变化都不会有问题了：
| 代码如下 | 复制代码 |
|
<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>左栏固定宽度，右栏自适应之负margin法</title> <style type="text/css"> body{ margin: 0; } #container{ margin-left: 230px; _zoom: 1; /*兼容IE6下左栏消失问题*/ } #nav{ float: left; width: 230px; height: 600px; background: #ccc; margin-left: -230px; position: relative; /*兼容IE6下左栏消失问题，IE6真不让人省心啊>_<*/ } #main{ height: 400px; background: #0099ff; } #footer{ clear: both; text-align: center; background: #009000; } </style> </head> <body> <div id="container"> <div id="nav"> 左栏 </div> <div id="main"> 右栏 </div> </div> <div id="footer"> 底栏 </div> </body> </html> |
|