最容易理解的一种方法，以中间内容为主体，通过 margin 或者 padding 将两侧撑开，最后用 absolute 定位两侧

html:

<div class="container">
  <div class="left">

  </div>
  <div class="main"></div>
  <div class="rigth">

  </div>
</div>
css:

body,html {
  height: 100%;
}
.container{
  position: relative;
  height: 100%;
}
.left,.rigth{
  position: absolute;
  top: 0;
  width: 200px;
  height: 100%;
}
.left{
  left: 0;
  background: red;

}
.rigth{
  right: 0;
  background: black;
}
.main {
  margin: 0 200px;
  background: blue;
  height: 100%;
}

第二种移动端flex布局
html:

<div class="container">
  <div class="left">

  </div>
  <div class="main"></div>
  <div class="rigth">

  </div>

css:

.container {

  display: flex;

}

.left, .right {

  width: 200px;

}

.main {

  display: flex;

  flex: auto;

}

三左右浮动
css:

.container {

  overflow: hidden;

}

.left,

.right {

  width: 200px;

}

.main {

  width: auto;

}

.left {

  float: left;

}

.right {

  float: right;

}