多列等高布局

flex布局

  
主要内容区域主要内容区域主要内容区域
  
侧边栏侧边栏
  
侧边栏侧边栏

 .row {
  display: flex;
}
.col {
  flex: 1;
  border:solid;
  background:red;
}

table

  
主要内容区域
  
侧边栏侧边栏侧边栏侧边栏侧边
  
侧边栏侧边栏侧边栏侧边栏侧边

.container{
    display: table-row;  
  background:yellow;
}
.mainBox{
　  display: table-cell;
    width: 80%;
}
.sideBox{
   display: table-cell;
   width: 20%;
   background: red;
}