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

最新推荐文章于 2024-07-09 16:38:59 发布

每天好鑫晴

最新推荐文章于 2024-07-09 16:38:59 发布

阅读量1.9k

点赞数 1

分类专栏： css&&html 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43529311/article/details/126008641

版权

css&&html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>