实现 三栏布局

三栏布局： 两边固定 中间自适应

<div class="container">
    <div class="header">头部</div>
    <div class="main">主要部分</div>
    <div class="footer"> 底部</div>
</div>

实现结果

实现方法1 display
父元素 设置display:flex 布局
两端给固定的值 中间给flex :1

.container{
  width: 100%;
  height: 700px;
  background: pink;
  display: flex;
  flex-direction: column
}
.header{
 height: 200px;
 background: green;
}
.main{
  flex:1;
  overflow: auto
}
.footer{
  height: 200px;
 background: blue;
}