本文章来给大家详细介绍关于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>
|
