这节我们要实现的目的只有一个，就是一栏固定一栏自适应。
1、使用div，这样就可以自动填满父标签宽度，设想方案如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
body{padding: 0;margin:0;}
#wrap{
overflow: hidden;*zoom: 1;
}
#sitebar{background: #D7B9FF; float: left; width: 300px;}
#content{
background: #36CEC5;margin-left:300px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="sitebar">我是固定左栏</div>
<div id="content">
我是右栏内容
</div>
</div>
</body>
</html>
但这个有个限制，就是sidebar必须在content之前！
2、遵循网页优化的角度，主要内容应该放前面，那么需要把content和sitebar位置换一下，然后固定蓝使用绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
body{padding: 0;margin:0;}
#wrap{
*zoom: 1; position: relative;
}
#sitebar{background: #D7B9FF; width: 300px;position: absolute;left:0;top: 0;}
#content{
background: #36CEC5;margin-left: 300px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
我是右栏内容
</div>
<div id="sitebar">我是固定左栏</div>
</div>
</body>
</html>
但是这样也有一个问题，因为左栏使用了绝对定位，那么再有其他层的话就会被它挡住。
3、加多一个层，使用浮动和margin结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
body{padding: 0;margin:0;}
#sitebar{background: #D7B9FF; width: 300px;float: left;}
#content{
background: #36CEC5;float: right;width: 100%;margin-right: -300px;
}
#content_wrap{
margin-right: 300px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content_wrap">
<div id="content">
我是内容
</div>
<div id="sitebar">我是固定左栏</div>
</div>
</div>
</body>
总结该布局应具备条件：
1、content自适应，sidebar固定
2、content在sidebar之前
3、后面的元素不受影响
时间： 2024-08-25 10:49:34