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

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

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

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

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

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

解决方法:

html,
body {
    height: 100%
}


http://www.kler.cn/news/312482.html

相关文章:

  • 牛客小白月赛101(栈、差分、调和级数、滑动窗口)
  • Java中out流中打印方法详解
  • 【设计模式-享元】
  • 深度学习后门攻击分析与实现(一)
  • 基于python+django+vue的家居全屋定制系统
  • IntelliJ IDEA 创建 HTML 项目教程
  • 基于SpringBoot+Vue的个性化旅游推荐系统
  • Android MediaPlayer + GLSurfaceView 播放视频
  • leetcode 392.判断子序列
  • MATLAB绘图:5.三维图形
  • 力扣53-最大子序和(Java详细题解)
  • SpringBoot 入门实践
  • Django+React+Neo4j实现的地质领域知识图谱系统
  • CentOS7更新YUM源
  • 9.20哈好
  • 算法【双向广搜】
  • QT Layout布局,隐藏其中的某些部件后,不影响原来的布局
  • 【数据结构】5——哈夫曼树(Huffman Tree)
  • Linux网络——手撕TCP服务器,制定应用层协议,实现网络版计算器
  • websocketpp服务器搭建
  • 使用knn算法对iris数据集进行分类
  • 人力资源数据集分析(一)_t-test、卡方检验和描述性统计
  • Spring Cloud常见面试题
  • 电子电气架构---智能汽车应该是怎么样的架构?
  • 24.9.18学习笔记
  • opengl-redbook环境搭建(静态库)
  • 『功能项目』事件中心处理怪物死亡【55】
  • Vue3:props实现组件通信
  • react 创建react项目
  • 高级java每日一道面试题-2024年9月14日-基础篇-如何处理事务中的性能问题?