0.初始化所有標(biāo)簽

/* 重置所有標(biāo)簽 */
* {
  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不占據(jù)剩余空間 */
  flex: 0 0 auto;
  background: red;
}

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

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