首页 > 其他分享 >css设置弹性flex后,如果设置100vh高度不撑满的原因

css设置弹性flex后,如果设置100vh高度不撑满的原因

时间:2024-07-14 12:01:39浏览次数:13  
标签:flex 元素 高度 height 撑满 设置 100vh

问题

父元素设置height为100%,有两个子元素,第一个设置height:100vh,第二个设置flex:1,此时第一个高度无法撑满盒子

原因+解决方式

当父元素设置display为flex,第一个div设置高度64px,剩一个div设置高度为flex:1,这时候肯定两个子元素同高。但是如果此时设置第一个div的高度为100vh,父元素必须设置高度为height: 100% 或min-height: 100vh,才能实现第一个div高度完全占满,如果设置height:100vh,则无效,虽然父盒子撑满了,但是第一个盒子属于是无效高度,因为给第二个盒子的flex:1挤掉了。

代码示例解决如下

(1)父元素:只需将height:100vh换掉,下面标红方式二选一

在这里插入图片描述
(2)第一个子元素:此时设置height:100vh就会生效了,高度可占满盒子

在这里插入图片描述
(2)第二个子元素:设置flex:1,也可以占满盒子

在这里插入图片描述

标签:flex,元素,高度,height,撑满,设置,100vh
From: https://blog.csdn.net/weixin_43883615/article/details/139833704

相关文章

  • Linux chmod 权限设置
    Linuxchmod权限设置 chmod是Linux和Unix系统中的一个用于改变文件或目录权限的命令。它的基本语法是:chmod[options]modefile其中,mode可以是数字模式的权限表示,也可以是符号模式,file是要改变权限的文件名或目录名。 1、数字模式数字形式的权限表示,由三位数......
  • 博客园皮肤设置
    1基本设置博客地址:https://www.cnblogs.com/chenyuanrumeng/[更改]作者名称:尘缘如梦![修改]会员:升级成为VIP会员博客标题博客子标题时区×EasternChinaTime(GMT+8)语言与地区×Chinese(Simplified)博客皮肤(117)最新皮肤×CustomJS权限:已开通(建议在页脚HTML代......
  • 电源纹波测试,从原理图到PCB板和示波器探头设置详解(适合新手小白)
    一、什么是纹波?    简单来说纹波就是叠加在直流信号上的交流干扰信号,是衡量电源好坏的一个重要标准。二、纹波测试点在原理图什么位置?    严谨起见我们尽量选择电路的终端进行测试,比如给MCU芯片供电的引脚,我们需要测量放置在MCU端的电容两端的纹波。如下图......
  • 亚马逊ERP常用的三大功能 设置最大订单数 定时上下架 无库存采集
    亚马逊全功能ERP最常用的三大功能:批量设置最大订单数量、批量定时上下架、不限店铺、不限子账号、无库存采集。今天我将为大家详细介绍亚马逊卖家最常使用的三大功能:批量设置最大订单数量、批量定时上下架以及无库存采集。·首先来探讨批量设置最大订单数量这一功能,这个功能......
  • 【Qt Designer用Frame设置背景图片】不影响其它组件小技巧,控件层级设置,组件的继承
    QtDesigner用Frame设置背景图片、颜色不影响其它组件小技巧,控件层级设置,组件的继承在设置背景时,遇到一个问题,例如用frame当最后一层设置背景,加载资源图片后,会使frame内部组件继承相同格式,很麻烦。原语句用法border-image:url(:/images/login.png);内部组件会出现父......
  • RK3568平台(vendor篇)分区设置
    一.分区概述在对评估板进行开发验证时,时常会遇到根目录空间不足的情况,而在其他分区又有冗余空间,这时则需要对分区大小重新进行分配,合理化利用分区空间。如何查看分区大小:df-h指令查看parameter.txt分区表修改路径rockdev/parameter.txt二.parameter.txt分区表介绍FI......
  • Qt pro 文件中路径设置 生成可执行文件路径等
    Qtpro文件中路径设置生成可执行文件路径恋恋西风已于2023-06-2923:22:50修改阅读量3.2k 收藏19点赞数1分类专栏:QT文章标签:qt开发语言版权QT专栏收录该内容61篇文章16订阅订阅专栏   工程文件.pro描述了工程信息。工程文件信息会被qmake用于生......
  • php将png转为jpg,可设置压缩率
    /***将PNG文件转换为JPG文件*@param$pngFilePathstringPNG文件路径*@param$jpgFilePathstringJPG文件路径*@param$qualityintJPG质量,0-100,值越低,压缩率越高*@returnvoid*@throwsException*/functionconvertPngToJpg($pngFilePath,$j......
  • excel单元格设置为文本为何还要双击
    excel单元格设置为文本时为何还要双击才有效?我选定一行,用右键设置为文本,为何还要单个逐一双击才有效,否则选定求和时(包含其中一个单元格),仍视为数值。而逐一双击太麻烦,怎么解决?因为这是excel默认设置,如想要不单个操作,可使用分列的方式来批量处理。具体操作方式如下:1、以Excel201......
  • git设置代理, git clone无法连接github怎么办?MAC SSH如何连接github
    1.临时设置打开GitBash,使用命令临时设定socks代理:gitconfig--globalhttp.proxy'socks5://127.0.0.1:10808' gitconfig--globalhttps.proxy'socks5://127.0.0.1:10809'或者http代理:gitconfig--globalhttp.proxy'http://127.0.0.1:10809'#最......