左侧定宽，右侧自适应是一种常见的布局方式，比如好多后台和外卖点餐页面。
常用的几种方案如下：
方案1，使用flex布局:在线效果http://jsrun.net/FeYKp
<div class="main" style="width: 100%;height: 400px;"> <div class="left" style="width: 200px;height: 200px;background: red;"></div> <div class="right" style="background: blue;height: 200px;"></div> </div>
html,body{
margin:0;
padding:0;
}
.main{
display:flex;
}
.right{
flex:1;
}
方案2，左边左浮动，右边加个margin-left：在线效果http://jsrun.net/JeYKp/
html,body{
margin:0;
padding:0;
}
.left{
float: left;
}
.right{
margin-left:200px;
}
方案3，左边左浮动，右边overflow：hidden ：在线效果： http://jsrun.net/xeYKp
html,body{
margin:0;
padding:0;
}
.left{
float: left;
}
.right{
overflow: hidden;
}
方案4，左边使用绝对定位，右边使用margin-left ：在线效果：http://jsrun.net/GeYKp/
html,body{
margin:0;
padding:0;
}
.left{
position:absolute;
top:0;
left:0;
}
.right{
margin-left：200px;
}
原文：http://www.cnblogs.com/chenjinxinlove/p/7099227.html