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

news2024/9/22 3:36:37

问题

父元素设置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,也可以占满盒子

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据处理-Matplotlib 绘图展示

文章目录 1. Matplotlib 简介2. 安装3. Matplotlib Pyplot4. 绘制图表1. 折线图2. 散点图3. 柱状图4. 饼图5. 直方图 5. 中文显示 1. Matplotlib 简介 Matplotlib 是 Python 的绘图库,它能让使用者很轻松地将数据图形化,并且提供多样化的输出格式。 Ma…

Qt项目中添加自定义文件夹,进行整理归类

Qt项目中添加文件夹进行归类 1、在windows的工程目录下创建一个文件夹,如widgets 2、将.h 、.cpp、.ui文件拷贝到windows该文件夹widgets 3、在qt工程中,根目录右键,选择添加现有文件,批量选择 .h 、.cpp、.ui文件之后&#xf…

初识影刀:EXCEL根据部门筛选低值易耗品

第一次知道这个办公自动化的软件还是在招聘网站上,了解之后发现对于办公中重复性的工作还是挺有帮助的,特别是那些操作非EXCEL的重复性工作,当然用在EXCEL上更加方便,有些操作比写VBA便捷。 下面就是一个了解基本操作后&#xff…

开发总结 - H5/web C端评论区开发逻辑

1. 背景 平时做的系统都是偏公司业务的系统,这次开发了一个用户评论的功能,同时开发了web版和H5版本的,因为没有做过这种C端的常用的功能,所以记录一下此次的开发,从参考友商设计到独立思考业务之间的区别再到实际开发…

everything搜索不到任何文件-设置

版本: V1.4.1.1024 (x64) 问题:搜索不到任何文件 click:[工具]->[选项]->下图所示 将本地磁盘都选中包含

2024 辽宁省大学数学建模竞赛B 题 钢铁产品质量优化完整思路 代码 结果分享(仅供学习)

冷轧带钢是钢铁企业的高附加值产品,其产品质量稳定性对于钢铁企业的经济效益具有非常重要的影响。在实际生产中,冷连轧之后的带钢需要经过连续退火处理来消除因冷轧产生的内应力并提高其机械性能。连续退火的工艺流程如图1 所示,一般包括加热、保温、缓冷…

Datawhale AI 夏令营 Task1

记录第一次参加Kaggle上的比赛,通过一站式的教程,没有一点阻碍的跑通了baseline 夏令营方向的选择 我选择的夏令营是关于CV方向的,因为本身对于cv方向比较感兴趣,而且这次夏令营的方式我很喜欢,通过比赛来促进学习&a…

板级调试小助手(5)基于Python访问千帆大模型

一、前言 千帆大模型是百度提供的可以使用API接口调用GPT模型,使用Python调用其实是很简单的:去千帆大模型申请账号->使用python调用API即可,具体可以参考这位大佬的博客,这里就不赘述了。 【教程】如何用Python调用百度的千帆…

基于Java+SpringMvc+Vue技术的药品进销存仓库管理系统设计与实现系统(源码+LW+部署讲解)

注:每个学校每个老师对论文的格式要求不一样,故本论文只供参考,本论文页数达到60页以上,字数在6000及以上。 基于JavaSpringMvcVue技术的在线学习交流平台设计与实现 目录 第一章 绪论 1.1 研究背景 1.2 研究现状 1.3 研究内容…

数据结构和算法(0-1)----递归

定义​ 递归是一种在程序设计中常用的技术,它允许一个函数调用自身来解决问题。递归通常用于解决那些可以被分解为相似的子问题的问题,这些问题的解决方式具有自相似性。在数据结构和算法中,递归是一种重要的解决问题的方法,尤其是…

项目范围管理-系统架构师(二十九)

1、(重点)软件设计包括了四个独立又相互联系的活动,高质量的()将改善程序结构的模块划分,降低过程复杂度。 A程序设计 B数据设计 C算法设计 D过程设计 解析: 软件设计包含四个,…

Golang | Leetcode Golang题解之第232题用栈实现队列

题目: 题解: type MyQueue struct {inStack, outStack []int }func Constructor() MyQueue {return MyQueue{} }func (q *MyQueue) Push(x int) {q.inStack append(q.inStack, x) }func (q *MyQueue) in2out() {for len(q.inStack) > 0 {q.outStack…

Linux权限相关

目录 Linux中的用户 Linux权限管理 Linux的文件访问者分类 Linux的文件类型和访问权限 文件类型 文件权限 文件权限的修改 文件所有者修改 文件所有者所在组修改 目录权限 粘滞位 文件掩码 在Linux中,权限包括用户的权限和文件的权限 Linux中的用户 在…

Android 儿童绘本/汉语拼音实现

有这样一个项目&#xff0c;开发一个电子绘本&#xff0c;需要在绘本上显示&#xff0c;汉语拼音。 界面布局 <androidx.core.widget.NestedScrollViewandroid:layout_width"match_parent"android:layout_height"match_parent"android:fillViewport&quo…

路径规划 | 飞蛾扑火算法求解二维栅格路径规划(Matlab)

目录 效果一览基本介绍程序设计参考文献 效果一览 基本介绍 路径规划 | 飞蛾扑火算法求解二维栅格路径规划&#xff08;Matlab&#xff09;。 飞蛾扑火算法&#xff08;Firefly Algorithm&#xff09;是一种基于自然界萤火虫行为的优化算法&#xff0c;在路径规划问题中也可以应…

C++·多态

1. 多态的概念 多态通俗讲就是多种形态&#xff0c;就是指去完成某个行为&#xff0c;当不同对象去做时会产生不同的结果或状态。 比如买火车票这个行为&#xff0c;同样是买票的行为&#xff0c;普通成年人买到全价票&#xff0c;学生买到半价票&#xff0c;军人优先买票。这个…

Qt MV架构-视图类

一、基本概念 在MV架构中&#xff0c;视图包含了模型中的数据项&#xff0c;并将它们呈现给用户。数据项的表示方法&#xff0c;可能和数据项在存储时用的数据结构完全不同。 这种内容与表现分离之所以能够实现&#xff0c;是因为使用了 QAbstractItemModel提供的一个标准模…

Go语言---TCP服务端以及客服端的实现

TCP的C/S架构 TCP服务器的实现 监听的底层实现 func Listen(network, address string) (Listener, error) {var lc ListenConfigreturn lc.Listen(context.Background(), network, address) }type Listener interface {// Accept waits for and returns the next connection …

Jenkins中Node节点与构建任务

目录 节点在 Jenkins 中的主要作用 1. 分布式构建 分布式处理 负载均衡 2. 提供不同的运行环境 多平台支持 特殊环境需求 3. 提高资源利用率 动态资源管理 云端集成 4. 提供隔离和安全性 任务隔离 权限控制 5. 提高可扩展性 横向扩展 高可用性 Jenkins 主服务…

【深度学习入门篇 ⑤ 】PyTorch网络模型创建

【&#x1f34a;易编橙&#xff1a;一个帮助编程小伙伴少走弯路的终身成长社群&#x1f34a;】 大家好&#xff0c;我是小森( &#xfe61;ˆoˆ&#xfe61; ) &#xff01; 易编橙终身成长社群创始团队嘉宾&#xff0c;橙似锦计划领衔成员、阿里云专家博主、腾讯云内容共创官…