flex布局设置一个div在上，另一个div充满剩余高度

flex布局设置一个div在上，另一个充满剩余高度

效果如下图

<template>
  <div class="flex-content">
    <div class="flex-top">
        <h1>上</h1>
    </div>
    <div class="flex-bottom">
        <h1>下</h1>
    </div>
  </div>
</template>
<style scoped>
.flex-content {
  width: 100%;
  /* 设置父级高度为100vh是为了充满整个屏幕，可根据实际需求自行设置 */
  height: 100vh; 
  display: flex;
  flex-direction: column;
}
.flex-top {
  /* 这里为上面的元素设置高度 */
  height: 80px;
  background-color: aquamarine;
}
.flex-bottom {
  /* 设置min-height和flex是余下空间充满的关键 */
  min-height: 0;
  flex: 1;
  background: rgb(149, 233, 236);
}
</style>复制