这是页面布局的一个经典问题，总结下几种可行性的方法。
左边布局定好宽度，右边布局实现自适应。
方法一：可以用用flex布局，给父容器设置 display：flex；Right部分设置 flex：1 ；left只是之前定好的宽度；
<!DOCTYPE html>
<html>
<head>
<title>布局</title>
<meta charset="utf-8">
<style type="text/css">
.left{
width: 300px;
height: 200px;
background-color: blue;
}
.box{
display: flex;
}
.right{
flex: 1;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
方法二：左边设置左浮动，右边宽度设置100%；
<!DOCTYPE html>
<html>
<head>
<title>布局</title>
<meta charset="utf-8">
<style type="text/css">
.left{
width: 300px;
height: 200px;
background-color: blue;
}
.box{
display: flex;
}
.right{
flex: 1;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
方法三：使用负margin，为自适应部分添加容器 .container, 同时改变左右部分的位置，如下：
<!DOCTYPE html>
<html>
<head>
<title>布局</title>
<meta charset="utf-8">
<style type="text/css">
.container{
float: left;
width: 100%;
}
.right{
margin-left: 300px;
height: 200px;
background-color: red;
}
.left{
float:left;
margin-left: -100%;
width: 300px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="right">right</div>
</div>
<div class="left">left</div>
</body>
</html>
方法四：设置浮动 + 在 css 中使用 calc(四则运算)函数
【分析】
1. 浮动。（注意：为了不影响其他元素，别忘了在父级上清除浮动）
2.
calc() = calc(四则运算)
用于在 css 中动态计算长度值，需要注意的是，
运算符前后都需要保留一个空格
，例如：
width: calc(100% - 10px)
；
3. 原理是利用
vw
：
viewport width
。1vw = viewport 宽度的 1%, 100vw = viewport width,
同样的还有 vh： viewport height。1vw = viewport 高度的 1%， 100vh = viewport height。
浏览器支持情况： 主流浏览器、IE10+
vw 和 vh 会随着viewport 的变化而变化，因此十分适合于自适应场景来使用。
。。。