程序员经验分享-hwhale

使用flex布局 子元素高度自适应填满空白問題

2023-11-07

之前没用flex布局过高度自适应，倒腾了一下终于成功，但是还有个bug（必须要给父元素高度，不给高度就实现不了。）

来看下具体代码
由于子元素的图片大小不一样，要实现填满空白，要使用flex-direction: column;
如果高度設置為height:100%;或height:auto;都沒效果。
在这里插入图片描述

效果如下
在这里插入图片描述

不行就只能給父元素設置實際高度，這裏設置為4300px;

在这里插入图片描述
效果如下：
在这里插入图片描述
單純的設置高度的話，拉到底部就會出現這樣的bug，因爲高度設置的沒那麽精準，弄起來也比較麻煩，如果後期做上拉加載的話很難就悲劇了，得用js來計算設置高度。
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

使用flex布局 子元素高度自适应填满空白問題 的相关文章

  • 云计算和物联网之间是什么关系，主要有什么区别？

    云计算和物联网是当今IT业界的两大焦点 它们有很大的区别 但同时也有着千丝万缕的联系 物联网通过数量惊人的传感器采集到难以计数的数据量 而云计算可以对这些海量数据进行智能处理 云计算是物联网发展的基石 而物联网又是云计算的最大用户 促进着云

  • Charles乱码和SSL 代理问题解决

    在刚接触Charles进行抓包使用时 遇到了两个问题 1 Charles上抓的包出现了乱码 2 Charles开启SSL Proxying代理后出现了手机无法上网或手机和电脑浏览器都无法上网的情况 浏览器提示证书不可用或过期 尝试了很久终于

  • SpringBoot开启事务

    Java知识点总结 想看的可以从这里进入 目录 2 12 事务开启 2 12 事务开启 Spring Boot使用的是Spring 事务管理机制 对事务管理提供了一个顶层的接口PlatformTransactionManager 对所支持的

  • RPA让采购流程更加高效丨采购领域应用RPA的5大场景

    采购是企业生产经营中必不可少的环节之一 也是企业成本构成的主要因素 企业采购形式多样 包括招标 竞争性谈判 磋商 询价 竞价等 如今 互联网的发展已经升级了采购模式 借力RPA提升采购效率 则是企业确保供应 降低成本 实现可持续发展的一个良

随机推荐

  • 深度学习实战（四）：行人跟踪与摔倒检测报警

    深度学习实战 四 行人跟踪与摔倒检测报警 1 项目简介 1 1 相关工作 2 方法简介 2 1 总体结构 2 2 骨架的图结构 2 3 空间图卷积网络 2 3 1 Sampling Function 2 3 2 Weight Functio

  • 大修或新更换的电压互感器TV为什么要核相(定相)?

    大修或新更换的电压互感器TV为什么要核相 定相 答 大修或新更换的互感器 含二次回路更动 在投入运行前应核相 定相 所谓定相 就是将TV一次侧在同一电源上 测定它们的二次侧电压相位是否相同 若相位不正确 会造成如下结果 1 破坏同期的正确性

  • [JSOI2018]机器人

    题目描述 一个 n m n times m n m的网格 有一个机器人一开始在 1 1

  • 画图软件怎么做性能测试,软件性能测试能力提升解决方案.pdf

    软件性能测试能力提升解决方案 软件性能测试能力提升解决方案 软件性能测试能力提升解决方案 软软件件性性能能测测试试能能力力提提升升解解决决方方案案 课程试用 课程试用 课课程程试试用用 测试经理 TM 测试主测 TC 测试架构师 TAE 测

  • ChatGPT充值，银行卡被拒绝，图文教程

    目录 前言 步骤 1 魔法地址选择 2 选择手机号码 归属地 3 勾选 服从协议 4 填写信息 5 完善账单地址 6 订阅成功 前言 大家好 今天我在订阅ChatGPT4时 遭遇了银行卡被拒绝的尴尬境地 这里有个技巧 助你开心畅享ChatG

  • 大数据和人工智能的关系，超全解析

    大数据拥抱云计算 在PaaS层中一个复杂的通用应用就是大数据平台 大数据是如何一步一步融入云计算的呢 1数据不大也包含智慧 一开始这个大数据并不大 原来才有多少数据 现在大家都去看电子书 上网看新闻了 在我们80后小时候 信息量没有那么大

  • 使用C++封装MySQL API的教程（Python）

    在本教程中 我们将学习如何使用C 封装MySQL的API 并使用Python作为示例 我们将创建一个简单的程序 通过C 封装的MySQL API连接到MySQL数据库 并执行一些基本的数据库操作 MySQL是一个流行的开源关系型数据库管理系

  • ESP32（MicroPython）LVGL图形界面 RGB灯闪烁控制器

    ESP32 MicroPython RGB灯闪烁控制器 本程序通过依次调整RGB灯中每个灯的P 频率和占空比实现对RGB灯闪烁的控制 import lvgl as lv import time from espidf import VSPI

  • 【Shell牛客刷题系列】SHELL10 第二列是否有重复：复习sort命令和uniq命令~

    该系列是基于牛客Shell题库 针对具体题目进行查漏补缺 学习相应的命令 刷题链接 牛客题霸 Shell篇 该系列文章都放到专栏下 专栏链接为 专栏 Linux 欢迎关注专栏 本文知识预告 本文主要涉及的命令是sort命令和uniq命令 这

  • Python_inspect的使用

    The inspect module provides several useful functions to help get information about live objects such as modules classes

  • Kafka基础知识(个人总结)

    声明 1 本文为我的个人复习总结 并非那种从零基础开始普及知识 内容详细全面 言辞官方的文章 2 由于是个人总结 所以用最精简的话语来写文章 3 若有错误不当之处 请指出 消息队列 作用 优点 异步处理 使用微信 进行建行卡支付时 如果没资

  • 每日一题分享（三）

    给你一个含 n 个整数的数组 nums 其中 nums i 在区间 1 n 内 请你找出所有在 1 n 范围内但没有出现在 nums 中的数字 并以数组的形式返回结果 分析 第一种思路 1 我们可以新定义一个数组 里面放的就是1到n的数 2

  • （二十一）QT的构造函数重载

    在实际开发中 我们可能遇到一个问题 对于一个类 我们可能需要传递给它不同的参数 让它执行不同的行为 或者在使用旧的类时 我们希望加上一个新的参数 但是这个参数在旧的逻辑中不使用 需要在新的逻辑中使用 如果我们改了这个类 会导致使用旧的类的函

  • 打造高质量视频，创造视觉奇观！Camtasia 2023为你升级！

    嘿 伙计 在这个全新版本中 我们迎来了焕然一新的动画控制和更简化的特效制作流程 让创作变得更高效 不仅如此 全新的背景去除和动画光标功能也让视频拥有全新的视觉体验 让我们先谈谈光标 这个细节或许被忽视 却能让您的录屏更显个性 Camtasi

  • OSI七层网络结构图与TCP/IP五层网络结构图

    一 OSI七层网络结构图与TCP IP五层网络结构图 又称 OSI七层网络模型与TCP IP四层网络模型 1 OSI七层模型 OSI中的层 功能 TCP IP协议族 应用层 文件传输 电子邮件 文件服务 虚拟终端 TFTP HTTP SNM

  • storm计数器(小白看懂系列)

    现在要用storm做一个计数器 我的方案是 不断地输入一串字符串 然后统计每个单词的频数 这篇博客从以下几个方面进行阐述 基本配置 流程分析与类的确定 奉上代码 含注释 一 基本配置 这里注意 导包的时候要注意 否则可能会出现神奇的强制类型

  • websocket 接口如何测试？

    什么是 websocket 接口 使用 websocket 建立长连接 服务端和客户端可以互相通信 服务端只要有数据更新 就可以主动推给客户端 WebSocket 使得客户端和服务器之间的数据交换变得更加简单 允许服务端主动向客户端推送数据

  • 【深度学习】5：CNN卷积神经网络原理

    前言 先坦白的说 深度神经网络的学习在一开始对我造成的困扰还是很大的 我也是通过不断地看相关的视频资料 文献讲解尝试去理解记忆 毕竟这些内容大多都是不可查的 我们看到的都只是输入输出的东西 里面的内部运作以及工作原理 都需要沉心静思 这篇C

  • Python 远程控制Linux

    导入paramiko库 pip install paramiko import paramiko 创建SSHClient实例对象 ssh paramiko SSHClient 调用方法 表示没有存储远程机器的公钥 允许访问 ssh set

  • 使用flex布局 子元素高度自适应填满空白問題

    之前没用flex布局过高度自适应 倒腾了一下终于成功 但是还有个bug 必须要给父元素高度 不给高度就实现不了 来看下具体代码 由于子元素的图片大小不一样 要实现填满空白 要使用flex direction column 如果高度設置為he

热门标签