0.初始化所有标签

/* 重置所有标签 */
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

/* 必须定义父级宽高 */
html,
body {
  height: 100%;
  width: 100%;
}

1.父元素

#app {
  width: 100%;
  height: 100%;
  display: flex; /* 布局 */
  flex-direction: column; /* 上下方向 */
  background: white;
}

2.子元素-固定高度

/* 上边 */
#top {
  /* 固定高度 */
  height: 60px;
  /* 固定高度的Div不占据剩余空间 */
  flex: 0 0 auto;
  background: red;
}

3.子元素-占剩余父级元素所有高度

/* 下边 */
#bottom {
  /* 占父级元素剩余的高度 */
  /* height: calc(100% - 60px);  */
  flex: 1 1 auto;
  background: blue;
}