方法一

1.利用定位实现两侧固定中间自适应

1.1 父盒子设置左右padding值

1.2 给左右盒子的width设置父盒子的padding值,然后分别定位到padding处

1.3 中间盒子自适应

具体css代码:

<style>
   .father {
       height: 400px;
       background-color: pink;
       position: relative;
       padding: 0 200px;
   }
   .left, .right {
       width: 200px;
       height: 300px;
       background-color: yellow;
       position: absolute;
       top: 0;
   }
   .left {
       left: 0;   
   }
   .right {
       right: 0;
   }
   .center {
       background-color: blue;
       height: 350px;
   }
</style>

html结构
 <div class="father">
      <div class="left"></div> 
      <div class="center"></div> 
      <div class="right"></div> 
 </div>

方法二

2.利用flex布局实现两侧固定中间自适应

2.1 父盒子设置display: flex;

2.2 左右盒子设置固定宽高

2.3 中间盒子设置flex: 1;

具体css代码:

<style>
   .father {
       height: 400px;
       background-color: pink;
       display: flex;
   }
   .left {
       width: 200px;
       height: 300px;
       background-color: yellow;   
   }
   .right {
       width: 200px;
       height: 300px;
       background-color: yellow;   
   }
   .center {
       flex: 1;
       background-color: blue;
   }
</style>

html结构
 <div class="father">
      <div class="left"></div> 
      <div class="center"></div> 
      <div class="right"></div> 
 </div>

方法三

3.利用bfc块级格式上下文,实现两侧固定中间自适应

3.1 左右固定宽高,进行浮动

3.2 中间overflow: hidden;

具体css代码:

<style>
   .father {
       height: 500px;
       background-color: pink;
   }
   .left {
       float: left;
       width: 200px;
       height: 400px;
       background-color: blue;   
   }
   .right {
       float: right;
       width: 200px;
       height: 400px;
       background-color: blue;   
   }
   .center {
       height: 450px;
       background-color: green;
       overflow: hidden;
   }
</style>

html结构
<!-- 注意:left和right必须放在center前面 -->
 <div class="father">
      <div class="left"></div> 
      <div class="right"></div> 
      <div class="center"></div> 
 </div>