当前位置: 首页 > news >正文

css百分比布局中height:100%不起作用

百分比布局时,我们有时候会遇到给高度 height 设置百分比后无效的情况,而宽度设置百分比却是正常的。

当为一个元素的高度设定为百分比高度时,是相对于父元素的高度来计算的。当没有给父元素设置高度(height)时或设置的高度值百分比不生效时,浏览器会根据其子元素来确定父元素的高度(块级元素的高是由子元素撑开的),所以当无法获取父元素的高度时,也就无法计算自己的高度。

换句话说,父元素的高度是一个缺省值,当你要求浏览器根据这样一个缺省值来计算百分比高度时,浏览器不会对这个值有任何的反应。

问题原因:只为部分父元素设置了高度,有时可能忽略了html也需要设置高度。

解决方法:

html,
body {height: 100%
}

http://www.lryc.cn/news/437298.html

相关文章:

  • java程序员入行科目一之CRUD轻松入门教程(二)
  • (不用互三)解密AI创作:提升Prompt提示词的提问技巧
  • Python 错误 ValueError 解析,实际错误实例详解 (二)
  • 会员计次卡渲染技术-—SAAS本地化及未来之窗行业应用跨平台架构
  • Redis网络模型、通信协议、内存回收
  • 闯关leetcode——21. Merge Two Sorted Lists
  • Notepad++中提升编码效率的关键快捷键
  • ai智能语电销机器人有哪些功能?
  • ctfshow-PHP反序列化
  • BEV学习---LSS-2
  • PhpStudy下载安装使用学习
  • 在Excel中通过Python运行公式和函数实现数据计算
  • 基于SpringBoot+Vue的美妆购物系统
  • uniapp uni-table合并单元格
  • MySQL 创建数据库和表全攻略
  • 大数据-126 - Flink State 03篇 状态原理和原理剖析:状态存储 Part1
  • RFID射频模块(MFRC522 STM32)
  • 【JavaSE】--方法的使用
  • wireshark打开时空白|没有接口,卸载重装可以解决
  • 单值二叉树--(C语言)
  • Linux云计算 |【第三阶段】PROJECT1-DAY2
  • Claude Prompt 汉语新解
  • 【运维监控】influxdb 2.0+grafana 监控java 虚拟机以及方法耗时情况(2)
  • 怎么看待伦敦银交易的风险与收益?
  • 如何通俗易懂的解释TON的智能合约
  • 针对Docker容器的可视化管理工具—DockerUI
  • 五大注入攻击网络安全类型介绍
  • linux-L9.linux中对文件 按照时间排序 显示100 个
  • springboot从分层到解耦
  • 网络视频流解码显示后花屏问题的分析