<div class=con>
<div class=left></div>
<div class=right></div>
<div class="middle"></div>
</div>
<!---->
<style>
*{
margin: 0;
}
.con{
width: 100vw;
height: 100vh;
}
.left{
float: left;
height: 100%;
width:200px;
background: red;
}
.right{
float: right;
height: 100%;
width:200px;
background: green;
}
.middle{
margin-left: 200px;
margin-right: 200px;
height:100%;
background: blue;
}
.con::after{/*消除浮动*/
content: '';
display: block;
visibility: hidden;
clear: both
}
</style>
效果图: