兩邊的盒子寬度固定，中間盒子自適應。
一、flex
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent {
display: flex;
height: 500px;
width: 100%;
}
.aside {
width: 300px;
background-color: bisque;
flex-shrink: 0;
}
.content {
width: 100%;
background-color: aqua
}
</style>
</head>
<body>
<div class="parent">
<div class="aside">left-aside</div>
<div class="content">content</div>
<div class="aside">right-aside</div>
</div>
</body>
</html>
二、絕對定位（設置了最小寬度限制）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent {
position: relative;
height: 500px;
width: 100%;
min-width: 1200px;
}
.parent * {
height: 100%;
}
.aside {
width: 300px;
position: absolute;
background-color: blueviolet;
z-index: 99;
}
.left {
left: 0%;top:0%;
}
.right {
right: 0%;top:0%;
}
.content {
width: 100%;
min-width: 1200px;
padding: 0px 300px;
position: relative;
left: 0%;
box-sizing: border-box;
background-color: aqua
}
</style>
</head>
<body style="margin: 0px">
<div class="parent">
<div class="aside left">left-aside</div>
<div class="content">content</div>
<div class="aside right">right-aside</div>
</div>
</body>
</html>
三、浮動（設置了最小寬度限制）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent {
height: 500px;
width: 100%;
min-width: 1000px;
background-color: aqua
}
.parent *{
position: relative;
height: 100%;
}
.aside {
width: 300px;
background-color: bisque;
}
.content {
display: inline-block;
}
</style>
</head>
<body style="margin: 0px;">
<div class="parent">
<div class="aside" style="float: left;">1</div>
<div class="content">2</div>
<div class="aside" style="float: right;">3</div>
</div>
</body>
</html>