多列等高布局

flex布局

<div class="row">
  <div class="col">主要内容区域主要内容区域主要内容区域</div>
  <div class="col">侧边栏侧边栏</div>
  <div class="col">侧边栏侧边栏</div>
</div>
 .row {
  display: flex;
}
.col {
  flex: 1;
  border:solid;
  background:red;
}

table

<div class="container">
  <div class="mainBox">主要内容区域</div>
  <div class="sideBox">侧边栏侧边栏侧边栏侧边栏侧边</div>
  <div class="sideBox">侧边栏侧边栏侧边栏侧边栏侧边</div>
</div>
.container{
    display: table-row;  
  background:yellow;
}
.mainBox{
　  display: table-cell;
    width: 80%;
}
.sideBox{
   display: table-cell;
   width: 20%;
   background: red;
}