[常用布局]左栏固定宽度,右栏自适应的两种纯CSS方法
- - 蓝飞技术部落格其一,左栏固定宽度,右栏自适应之绝对定位法:. 左栏固定宽度,右栏自适应之绝对定位法 . 由于左栏使用绝对定位,脱离了文档流,因此有一个缺陷,即当左栏高度大于右栏时,无法将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: 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>