【css】height: 100%无效 不生效的原因及解决办法

已于 2023-01-07 14:53:24 修改
阅读量1.5k 收藏 1
点赞数
分类专栏： css3 文章标签： css 前端 html
于 2022-12-20 10:16:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hzxOnlineOk/article/details/128381125
版权

解决

height: inherit;

原因

在正常情况下height：100%与height：inherit没有任何区别；

1.父元素：height：auto；height：100%与height: inherit也都是auto；
2.父元素定高：height：100px; height:100%与height: inherit也都是100px；

如果子元素为绝对定位元素，则height：100%；参考的父级是离它最近的有定位属性的父级而非直接父级（因为脱离文档流了）；

但是此时height：inherit；参考的依旧是直接父级，无论直接父级是否有定位属性；

hzxOnlineOk
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
IE6 CSS高度height:100% 计算失效/无效
09-25
遇到了一个小小的问题(或者你已经遇到了)，在这里分享一下IE6 CSS高度height:100% 计算失效/无效，该问题如何解决
div设置height:100%;无效的原因
weixin_34112208的博客
10-18 825
2019独角兽企业重金招聘Python工程师标准>>> ...
css height: 100%；失效
weixin_42220130的博客
06-14 981
body{ height：100% }
设置height:100%无效的原因以及两种解决方法
热门推荐
小多的博客
01-04 2万+
原因：我们知道在把盒子宽度自适应为浏览器窗口宽度，只需设置width:100%就可轻松解决问题，但是让盒子的高度自适应浏览窗口的高度并非那么容易，这是因为css内部计算的原因 <!-- 高度实际为字体大小 --> <div class="box" style="width:100%;height:100%;background-color:red;"> width:100%;height:100%; </div> 解决方法一：设置父元素高度 html, bod
CSS 高度设置100%无效的原因
Crawlychen的博客
07-19 2111
原因：当子元素高度设置为100%时，是根据父元素的高度来进行计算的，因为父元素的高度未设置，默认为auto，所以子元素的高度便无法得到确定。 参考：CSS如何让height：100%起作用 https://www.cnblogs.com/qianxunpu/p/7991429.html ...
css height:100% 为什么不起作用
最新发布
weixin_35843253的博客
12-14 2141
2. 父元素的高度为百分比值：如果父元素的高度也是以百分比值来设置的，那么它的实际高度将取决于其祖先元素的高度。的确可以设置元素的高度为其父元素的百分比高度。但要注意的是，为了实现这个效果，父元素的高度必须已经通过某种方式设置为一个确定的值，而不是默认的。4. 父元素使用了浮动或绝对定位：如果父元素使用了浮动或绝对定位等布局属性，那么它的高度将会塌缩为0，此时子元素的。1. 没有设置父元素的高度：如果父元素的高度未设置或设置为。3. 父元素的高度为可视窗口高度：如果父元素的高度是。也无法确定正确的高度。
解决CSS布局中div高度无法达到100%的问题及其解决方案
m0_55337678的博客
10-31 962
解决CSS中height:100%失效的问题
【css】div盒子height:100%高度无效解决办法
hzxOnlineOk的博客
11-24 5083
需要分成2种情况来看待，flex情况下，非flex情况下
css中高度设置百分比但是没有效果
Drollwanttofly的博客
06-15 475
原因是百分比的大小是相对其父级元素宽高的大小，最外层元素设置的百分比是对应屏幕而言的。若某元素的父元素没有确定高度，则无法有效使用height=XX%的样式！当我们给块级元素高度的时候，往往没能看到效果。使用基于视图窗口的单位 vw，vh。
为什么设置height:100%有时没有生效的原因
jian091309的博客
04-23 3470
为什么设置height:100%有时没有生效的原因
深入理解CSS的height:100%和height:inherit之间的使用区别
01-19
inherit确实是个好东西，不仅节约代码，尤其与...1. 兼容性差异height:100% IE6+ √height:inherit IE8+ √ 2. 大多数情况作用是一样的除去兼容性，大多数情况下，两者作用是一样的，甚至都很难想出不一样的理由
CSS设置元素width=100%失效的一种解决方式(该元素的父元素为body).pdf
12-16
CSS设置元素width=100%失效的一种解决方式(该元素的父元素为body)
CSS的高度100%为什么不生效呢？
聂培志的博客
01-30 704
body的height:100% css中的height: 100%是相对于父元素，当我们设置div{height: 100%}，发现div的高度并没有发生变化。 原因是因为div的父元素的高度没有设置，所以： html,body { height: 100%; } html的高度等于浏览器的高度，这样div的高度就等于了父元素的高度了。 元素的height:100% 需要父元素指定具体...
css height:100%失效
weixin_33804582的博客
03-14 126
有时做移动端页面时，需要用到height：100%来控制，但是设置完后会发现，用百分比的高是不生效的。 经过上网浏览等查阅资料得知，是否可以使用百分比是根据父级对象定义的。所以解决方法就是在body和html，加上height:100%；就可以了。下面看代码。 html,body{ height:100%; } .height{ height:50%;...
css height: 100%无效问题
sw_onload的博客
06-23 596
height: 100%无效有可能是其父元素本身就没高度或者fymin-height：100%, 子元素设置height:100%无效 height:100%的组件继承其父组件的高度，所以首先找其父元素的高度，若父元素也设置了100%，同理再往上找 ...
为啥你的height:100%不起作用？让高度百分比，height:100% 生效的3种方法.
Harley567
02-02 2399
让高度百分比，height:100% 生效的3种方法
CSS难点 为什么height设置100%会失效，分栏目等高布局(高度自适用布局)的实现方案...
04-23 962
前言 相信在平时写CSS的时候大家都或多或少遇见过设置了height为百分比的时候发现不起作用。今天我们就来一探究竟 原因：父元素未设置具体高度，子元素设置height:100%是无效的。 现象以及方案 [1] 设置高度为100%时，无法实现全屏 <!DOCTYPE html> <html lang="en"> <head> <meta ...
解决height: 100%无效
笨笨的灰太狼的博客
07-03 2388
我们利用百分数控制元素的宽高时有时候会不起作用，在css里面，height:100%;是相对于父元素的高度而言的，如果我们没有给父元素设置宽高，那么我们的设置就不会生效，解决办法就是在css文件中加入如下样式： html, body{ width: 100%; height:100%; margin: 0; } ...
css less 文件:global的写法
hzxOnlineOk的博客
09-10 1万+
css :global #close-button { margin-bottom: 20px !important; } .attachItem :global #nprogress { background: #eee; height: 0; } less :global { .signin_list .am-list-item .am-list-line .am-list-content { padding-top: 15px; padding-botto.
height100%不生效
07-27
回答: 当使用height: 100%时，元素的高度并不会自动适应父元素的高度。这是因为在CSS中，百分比的高度需要根据父元素容器的高度来计算。如果父元素没有明确设置高度，那么子元素的高度将无法正确计算。\[2\] 为了解决这个问题，可以尝试以下几种方法： 1. 第一种方法是将父元素设置为position: relative，子元素设置为position: absolute。这样子元素的高度将相对于父元素进行计算，并且可以使用height: 100%来设置子元素的高度。\[3\] 2. 第二种方法是给父元素添加一层容器，并使用flex布局。将子元素的高度设置为50%，并且父元素的高度将根据子元素的高度自动调整。\[3\] 3. 第三种方法是给父元素添加display: grid属性。这样子元素的高度将根据网格布局进行计算，并且可以使用height: 100%来设置子元素的高度。\[3\] 4. 第四种方法是给子元素添加min-height: inherit属性。这样子元素的最小高度将继承父元素的高度，并且可以使用height: 100%来设置子元素的高度。\[3\] 通过使用这些方法，你可以解决height: 100%不生效的问题，并使子元素的高度正确适应父元素的高度。 #### 引用[.reference_title] - *1* [设置height:100%无效的原因以及两种解决方法](https://blog.csdn.net/wgh4318/article/details/122308108)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [关于height:100%不生效的问题](https://blog.csdn.net/Wang1996332/article/details/103169509)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [关于父元素设置min-height，子元素设置 height 100% 不生效的问题](https://blog.csdn.net/G_ruirui/article/details/112556624)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hzxOnlineOk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值