左侧固定宽度 右侧自适应

这种布局比较常见，一般情况下，宽度固定区域放置侧边栏，而自适应区域放置主体内容。

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;
}

方法四效果图 - 固定宽度区域高 方法四效果图 - 自适应宽度区域高