心系少时言 等一不归人
这种布局比较常见，一般情况下，宽度固定区域放置侧边栏，而自适应区域放置主体内容。
html代码：
<div class="wrap">
<div class="left">
我是左侧，固定宽度
</div>
<div class="right">
我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。
</div>
</div>
<div class="footer">我是底部，测试前面的样式是否会影响到接下来后面的内容</div>
方法一： 使用 display: table; display: table-cell;
CSS代码：
body{
color: #fff;
}
.wrap{
display: table;
}
.left{
width: 200px;
display: table-cell;
background-color: slateblue;
}
.right{
display: table-cell;
background-color: blueviolet;
}
.footer{
height: 100px;
background-color: salmon;
}
方法一效果图
方法二： 使用 float: left; margin-left: 200px;
注意： html代码中，固定宽度的div 要放在自适应宽度的div前面
CSS代码：
body{
color: #fff;
}
.wrap{
zoom: 1;
overflow: hidden;
}
.left{
width: 200px;
float: left;
background-color: slateblue;
}
.right{
margin-left: 200px;
background-color: blueviolet;
}
.footer{
height: 100px;
background-color: salmon;
}
方法三： 使用 float: left; width: calc(100% - 200px);
前端常用CSS小技巧 中第17条有介绍calc
CSS代码：
body{
color: #fff;
}
.wrap{
zoom: 1;
overflow: hidden;
}
.left{
width: 200px;
float: left;
background-color: slateblue;
}
.right{
width: calc(100% - 200px);
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
float: left;
background-color: blueviolet;
}
.footer{
height: 100px;
background-color: salmon;
}
方法二、方法三效果图
方法四： 使用 position: absolute; margin-left: 200px;
注意： 仅当自适应区域的高度大于固定宽度的高度时该方法才能正常显示，否则，会影响到接下来的内容（覆盖了下面的内容）
html代码：
<div class="wrap">
<div class="left">
我是左侧，固定宽度。我是左侧，固定宽度。我是左侧，固定宽度。我是左侧，固定宽度。我是左侧，固定宽度。我是左侧，固定宽度。我是左侧，固定宽度。我是左侧，固定宽度。我是左侧，固定宽度。我是左侧，固定宽度。
</div>
<div class="right">
我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。我是右侧，自适应宽度。
</div>
</div>
<div class="footer">我是底部，测试前面的样式是否会影响到接下来后面的内容</div>
CSS代码：
body{
color: #fff;
}
.wrap{
position: relative;
zoom: 1;
}
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
background-color: slateblue;
}
.right{
margin-left: 200px;
background-color: blueviolet;
}
.footer{
height: 100px;
background-color: salmon;
}
方法四效果图 - 固定宽度区域高
方法四效果图 - 自适应宽度区域高
