css布局（四宫格）

<div id="container">
 <!-- 左侧边框 -->
    <div class="Asider">
    <!-- 左上结构 -->
      <div style="margin-top:15px;">

      </div>
      <div class="header-Asider">

      </div>
      <!-- 左下结构 -->
      <div class="bottom-Asider">
      </div>
    </div>

    <!-- 中间主体部分 -->
    <div class="main">
      <!-- 地图 -->
      <div id="amap"></div>
      <!-- 表格 固定表头 内容可滚动 -->
      <div class="footer">

      </div>
    </div>
  </div>

css代码：
#container {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0);
  display:flex;
}

.Asider {
  height:100%;
  width:250px;
  border: 1px solid rgba(0, 0, 0, 0);
}

.header-Asider {
  height:400px;
  width:250px;
  overflow: auto;
  padding-bottom: 10px;
  border: 1px solid rgba(0, 0, 0, 0);
  display: inline-block
}

.bottom-Asider {
  height: 250px;
  width:250px;
  padding: 10px;
  padding-top: 20px;
  background-color:#F0F0F0;
  position:absolute;
	bottom:3px;
}

.main {
  display:flex;
  flex-direction: column;// 弹性盒子，垂直对齐
  width:1500px;
  height:660px;
  border-right: 1px solid rgb(193, 197, 205);
}

.footer {
  display:flex;
  flex-direction: column;// 弹性盒子，垂直对齐
  overflow: auto;
  height:500px;
  width:100%;
}

#amap {
  width: 100%;
  height: 100%;
}

呈现样式