Realize a fixed width on both sides, for example (200px each), the middle is adaptive according to the size of the browser's viewport. This layout is called the double-wing layout or the Holy Grail layout, and this is the layout of a certain treasure.
1. Use float to achieve the best compatibility, the code is as follows:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
.content{
width: 100%;
min-width: 600px;
padding: 0 200px;
box-sizing: border-box;
}
.content div{
float: left;
}
.center{
width: 100%;
background: blueviolet;
}
.left,.right{
width: 200px;
}
.left{
background:pink;
margin-left: -200px;
}
.right{
background:yellow;
margin-right: -100%;
}
</style>
</head>
<div class="content">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<body>
</body>
</html>
The effect is as follows: 
2. Using flex layout, which is simple, the code is as follows:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
*{
padding: 0;
margin: 0;
border: 0;
}
.content{
width: 100%;
display: flex
}
.center{
flex-grow: 1;
background: blueviolet;
}
.left{
background:pink;
flex-basis: 200px;
}
.right{
flex-basis: 200px;
background:yellow;
}
</style>
</head>
<div class="content">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<body>
</body>
</html>