设置height:100%不生效的原因

之前网课案例总是不屑于去看,因为总觉得太花时间,但是不可否认的是,认真去看还是会有收获的,而且常有意外收获

昨天在看实现动画效果的综合案例中,意外解决了我长久以来的一个疑问:为什么给元素设置height:100%不生效?

样式不生效原因

给元素设置height:100%,元素的高度会变成父元素的100%

如果元素高度未生效,很有可能父元素的高度是0,导致子元素的高度也是0

案例

例如,在一个html骨架中,我给body添加了height:100%,但是打开浏览器审查元素时发现,body的高度居然是0

而body的父元素是html,审查元素发现,html的高度也是0

解决方案

超级easy,将html的高度也设为100%就好啦

html {

    height: 100%;

}

再次打开浏览器,body的高度就生效啦

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

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

相关文章

论文精读--InstructGPT

模型效果取决于数据效果,但在精细度上控制不够,只是大力出奇迹,这样有很大的问题: (1)数据量太多或者没有这方面的数据,模型学不会怎么办 (2)安全性问题,模…

踩坑——纪实

开发踩坑纪实 1 npm安装1.1 查看当前的npm镜像设置1.2 清空缓存1.3 修改镜像1.4 查看修改结果1.5 重新安装vue 2 VScode——NPM脚本窗口找不到3 springboot项目中updateById()失效4 前端跨域4.1 后端加个配置类4.2 CrossOrigin注解 5 路由出口6 springdoc openapi3 swagger3文件…

VMware 虚拟机 VM10~17系列安装教程(功能最强大的电脑虚拟机软件)

前言 VMware是功能最强大的虚拟机软件,用户可以在虚拟机同时运行各种操作系统,进行开发、测试、演示和部署软件,虚拟机中复制服务器、台式机和平板环境,每个虚拟机可分配多个处理器核心、主内存和显存。 系统要求 VM17 VM16&am…

《ESP8266通信指南》番外-(附完整代码)ESP8266获取DHT11接入(基于Lua)

前言 此篇为番外篇,是 ESP8266 入门的其他功能教程,包括但不限于 DHT11 驱动TCP 通信Thingsboard 平台的接入阿里云物联网云平台接入华为云平台接入 1. 小节目标 使用 Lua 驱动 DHT11 传感器,获取温湿度的值 2. 进入主题 NodeMCU 基于 LUA 相关资料 官方文档:…

【每日刷题】Day47

【每日刷题】Day47 🥕个人主页:开敲🍉 🔥所属专栏:每日刷题🍍 🌼文章目录🌼 1. 112. 路径总和 - 力扣(LeetCode) 2. 2404. 出现最频繁的偶数元素 - 力扣&am…

Visual Basic6.0零基础教学(5)—VB的输入输出,顺序和选择结构

VB的输入输出和控制结构 文章目录 VB的输入输出和控制结构前言一、输入输出1. InputBox 输入2.MsgBox输出print 输出 二、控制结构1.顺序结构赋值语句 2.选择结构if ... then单分支if ... then...else.... 双分支if ... then... elseif ... then .. else ... 多分支Select Case…

视频监控管理平台LntonCVS监控视频汇聚融合云平台主要功能应用场景介绍

随着网络技术的不断发展和万物互联时代的到来,视频融合在一些系统集成项目及综合管理应用中变得日益重要。本文以LntonCVS视频融合云平台为案例,探讨视频融合的对象及其应用场景。 1. 视频监控设备 视频监控摄像设备是各种视频应用项目的基础部分。在视…

CSS单行、同行文本左右对齐

再项目需求中,UI小姐姐常常要考虑项目的排版样式更简洁高级,常常会在项目设置内容或者字体两端对齐的效果,比如,在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地等…

VUE3+Vite+vant4从零开始构建前端项目

VUE3Vitevant4从零开始构建前端项目 1. 环境准备Node.js 安装 2. Vite 构建项目3. 集成Vant41. 安装Vant 组件2. 引入组件3. 使用vant按钮组件 1. 环境准备 Node.js 安装 Node.js官网地址:https://nodejs.p2hp.com/ 下载最新的版本,下载文件为msi结尾的…

[力扣]——70.爬楼梯

题目描述: 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢? 本题较为简单,主要用到递归思想 int fun(int n,int memo[]) {if(memo[n]!-1) //如果备忘录中已经有记录了…

区块链的运行原理与演示

目录 前言 具体演示 1、在浏览器中输入区块链演示网址: 2、创建新区块 3、篡改区块信息使其无效 4、新增P2P 网络节点。 5、节点连接。 6、区块信息同步 总结 前言 区块链系统是由一系列分布在全球各地的分布式节点组成的。这些节点互不隶属,通过…

Sonatype Nexus Repository 3 路径遍历漏洞复现(CVE-2024-4956)

0x01 产品简介 Sonatype Nexus Repository 是美国Sonatype公司的一款存储库管理器,用于存储和分发软件组件、构建工件和 Docker 容器。它支持多种包格式,与 CI/CD 工具集成,并提供安全性和合规性功能。 0x02 漏洞概述 Sonatype Nexus Repository 3 存在路径遍历漏洞(CVE-…

数据结构(二)单链表

一、链表 (一)概念 逻辑结构:线性 存储结构:链式存储,在内存中不连续 分为有头链表和无头链表 同时又细分为单向、循环、双向链表 (二)有头单向链表示意图 以下数据及地址只是为了方便理解…

【Linux】文件系统和软硬链接

目录 一、认识文件系统 二、认识磁盘 三、磁盘文件系统 3.1 磁盘存储的抽象逻辑结构 3.2 磁盘文件系统图 3.3 创建和删除文件 3.4 如何理解目录? 3.5 如何查找一个文件 3.6 查找文件的一般流程 3.7 如何确定文件所在的分区 3.8 总结 四、软硬链接 4.1 …

30、QUiLoader 在程序运行时读取UI 文件中的信息

QUiLoader 类可让独立应用程序在运行时使用UI 文件中存储的信息,进而可以分离UI设计工作。 一、使用Qt 设计师-Qt Designer创建ui文件 打开Qt Designer,选择“创建” 往中央区域拖住几个控件,进行布局,更改三个控件的objectName…

参考文献交叉引用两个文献,逗号隔开

1.引用两个参考文献,定位到word正文中需要引用的位置,然后插入-交叉引用,引好文献 2.选中两个参考文献,切换域代码,然后进行修改: 改为 上面的两张图片中的点是空格的含义,word中按ctrlshift8就…

Qt | QGridLayout 类(网格布局)

01、上节回顾 Qt | QBoxLayout 及其子类(盒式布局)02、QGridLayout 简介 1、网格布局原理(见下图): 基本原理是把窗口划分为若干个单元格,每个子部件被放置于一个或多个单元格之中,各 单元格的大小可由拉伸因子和一行或列中单元格的数量来确定,若子部件的大小(由 sizeH…

css - sass or scss ?

总的来说,Sass 和 SCSS 提供的功能是一样的,选择哪种语法主要取决于你的个人或团队的偏好。

OFDM 802.11a的FPGA实现(二十一)发射主控模块MCU(含代码)

目录 1.前言 2.主控逻辑 3.Matlab 4.verilog 5.ModelSim 6.ModelSim仿真结构与Matlab自动化对比 完整工程链接(含verilog和Matlab代码): https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzkxNjM0NDk2Nw&actiongetalbum&album…

PHP报错 Notice: Undefined index: action in

upload靶场PHP报错 Notice: Undefined index: action in 修改 php.ini 中的 error配置下错误显示方式:将error_reporting E_ALL 修改为 error_reporting E_ALL & ~E_NOTICE 修改后重启下APCHE服务即可。