css设置弹性flex后,如果设置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,也可以占满盒子

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/798420.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

DROO论文笔记

推荐文章DROO源码及论文学习 读论文《Deep Reinforcement Learning for Online Computation Offloading in Wireless Powered Mobile-Edge Computing Networks》的笔记 论文地址:用于无线移动边缘计算网络在线计算卸载的深度强化学习 论文代码地址:DR…

AG32 的MCU与FPGA的主频可以达到568MHz吗

Customers: AG32/ AGRV2K 这个芯片主频和定时器最高速度是多少?用户期望 CPLD计时器功能0.1ns以下。 AGM RE: CPLD做不到 0.1ns的速率,这个需要10G以上的时钟。 那AGRV2K最高多少MHz呢? 一般200MHZ比较容易实现。 进一步说明&#xff1…

Vulnhub靶场DC-3-2练习

目录 0x00 准备0x01 主机信息收集0x02 站点信息收集0x03 漏洞查找与利用1. joomla漏洞查找2. SQL注入漏洞3. 破解hash4. 上传一句话木马5. 蚁剑连接shell6. 反弹shell7. 提权 0x04 总结 0x00 准备 下载链接:https://download.vulnhub.com/dc/DC-3-2.zip 介绍&#…

51单片机5(GPIO简介)

一、序言:不论学习什么单片机,最简单的外设莫过于I口的高低电平的操作,接下来,我们将给大家介绍一下如何在创建好的工程模板上面,通过控制51单片机的GPIO来使我们的开发板上的LED来点亮。 二、51单片机GPIO介绍&#…

数据结构初阶(C语言)-复杂度的介绍

在学习顺序表之前,我们需要先了解下什么是复杂度: 一,复杂度的概念 我们在进行代码的写作时,通常需要用到许多算法,而这些算法又有优劣之分,区分算法的优劣则是通过算法的时间复杂度和空间复杂度来决定。 …

python 怎样生成窗体

通过import tkinter导入Tkinter模块,没有这句下面的都不成立了。 wintkinter.Tk(),这句是创建windows的窗口对象,注意后面的Tk,大小写。 win.title("窗口"),这段是设置窗口上的标题。 另外窗口的大小你可以通…

Linux命令更新-Vim 编辑器

简介 Vim 是 Linux 系统中常用的文本编辑器,功能强大、可扩展性强,支持多种编辑模式和操作命令,被广泛应用于程序开发、系统管理等领域。 1. Vim 命令模式 Vim 启动后默认进入命令模式,此时键盘输入的命令将用于控制编辑器本身&…

云计算【第一阶段(31)】PXE高效批量网络装机

一、系统安装 1.1、系统装机的三种引导方式 1. 硬盘 2. 光驱( u 盘) 3. 网络启动 pxe 1.2、系统安装过程 加载boot loader Boot Loader 是在操作系统内核运行之前运行的一段小程序。通过这段小程序,我们可以初始化硬件设备、建立内存空间的映…

解决mysql,Navicat for MySQL,IntelliJ IDEA之间中文乱码

使用软件版本 jdk-8u171-windows-x64 ideaIU-2021.1.3 mysql-essential-5.0.87-win32 navicat8_mysql_cs 这个问题我调试了好久,网上的方法基本上都试过了,终于是解决了。 三个地方结果都不一样。 方法一 首先大家可以尝试下面这种方法&#xff1a…

无人驾驶大热,新能源汽车智能化中的算网支持

来源新华社:百度“萝卜快跑”全无人驾驶汽车行驶在路上 当前,新能源汽车产业数智化已成为全球汽车产业数字化转型的焦点。一方面,随着人工智能、大数据、云计算等技术的深度融合,新能源汽车在自动驾驶、智能互联、能源管理等方面…

【自动驾驶汽车通讯协议】UART通信详解:理解串行数据传输的基石

文章目录 0. 前言1. 同步通讯与异步通讯1.1 同步通信1.2 异步通信 2. UART的数据格式3. 工作原理3.1 波特率和比特率3.2 UART的关键特性 4. UART在自动驾驶汽车中的典型应用4.1 UART特性4.2应用示例 5. 结语 0. 前言 按照国际惯例,首先声明:本文只是我自…

STM32MP135裸机编程:BOOT跳转到APP前关闭所有中断、清除所有中断挂起标志操作方法

0 前言 一般来说,MCU/SOC的BOOT在跳转到APP前都需要进行环境清理的操作,其中必须进行的一项操作便是关闭所有中断、清除所有中断挂起标志。本文介绍基于STM32MP135裸机编程下关闭所有中断、清除所有中断挂起标志的操作方法。 1 操作方法 STM32MP135裸…

关于Kafka Topic分区和Replication分配的策略

文章目录 1. Topic多分区2. 理想的策略3. 实际的策略4. 如何自定义策略 1. Topic多分区 如图,是一个多分区Topic在Kafka集群中可能得分配情况。 P0-RL代表分区0,Leader副本。 这个Topic是3分区2副本的配置。分区尽量均匀分在不同的Broker上&#xff0c…

怎么减少pdf的MB,怎么减少pdf的大小

在数字化时代,pdf文件因其格式稳定、跨平台兼容性强等特点而广受欢迎。然而,随着内容的丰富,pdf文件的大小也日益增大,给文件传输和存储带来了不少困扰。本文将为你介绍多种减小pdf文件大小的方法,帮助你轻松应对这一问…

【ChatGPT】深入解析Prompt提示词及如何高效使用ChatGPT

一、Prompt提示词是什么? 1.1 Prompt的定义 Prompt是人工智能领域中的一个关键概念,尤其在自然语言处理(NLP)和生成型AI模型中。简而言之,prompt是一段文本或指令,用于引导或启动AI模型的特定响应或操作。…

成为CMake砖家(2): macOS创建CMake本地文档的app

大家好,我是白鱼。 使用 CMake 的小伙伴, 有的是在 Windows 上, 还有的是在 macOS 上。之前咱们讲了 windows 上查看 cmake 本地 html 文档的方式, 这篇讲讲 macOS 上查看 cmake 本地 html 文档的方法。 1. 问题描述 当使用 CMa…

C1W1.LAB.Preprocessing+Word frequencies+Logistic_regression_model

理论课:C1W1.Sentiment Analysis with Logistic Regression 文章目录 预处理导入包Twitter dataset简介查看原始文本处理原始文本处理超链接、Twitter 标记和样式分词去除标点和停用词词干处理 process_tweet() 词频构建与可视化导入包加载数据集字典字典实例添加或…

什么是im即时通讯?WorkPlus im即时通讯私有化部署安全可控

IM即时通讯是Instant Messaging的缩写,指的是一种实时的、即时的电子信息交流方式,也被称为即时通讯。它通过互联网和移动通信网络,使用户能够及时交换文本消息、语音通话、视频通话、文件共享等信息。而WorkPlus im即时通讯私有化部署则提供…

PostgreSQL日志文件配置,记录所有操作记录

为了更详细的记录PostgreSQL 的运行日志,我们一般需要修改PostgreSQL 默认的配置文件,这里整理了一些常用的配置 修改配置文件 打开 PostgreSQL 配置文件 postgresql.conf。该文件通常位于 PostgreSQL 安装目录下的 data 文件夹中。 找到并修改以下配…

Zabbix6.0使用自带模板(Redis by Zabbix agent 2)监控Redis数据库

注意:Zabbix6.0使用Redis by Zabbix agent 2 模板可直接监控Redis数据。 1、添加Redis账号密码信息(如果Redis没有设置密码可省略此步骤) vim zabbix_agent2.confPlugins.Redis.Sessions.redis.Uritcp://redis.huayunworld.com:6379 Plugins.Redis.Sessions.redis…