height:100%失效解决办法

首先我们要知道height:100%能生效有两种情况。

  1. 第一种是父级有显性高度,即写了具体值。当然从 html 一直往下都赋予height:100%也是属于这种情况。(html=>body=>...=>父级=>目标元素)。

    当然设置 max-heightmin-heightheight:100%的多数情况是没用的,它们只是设置边界而不是设置具体值。

  2. 第二种就是自身绝对定位,父级相对定位脱离文档流。其实原理和上述是一致的。

解决办法:

  1. 给予显性高度,当然这一办法几乎没用。能写死高度就不会出现这个问题了。

  2. 无奈的子绝父相,给予父级相对定位,自身绝对定位。

注意:子元素绝对定位是计算父元素的 padding 值的。而传统的height:100%是不计算的。当然使用全局的box-sizing: border-box就不用担心了。

还有一个问题。其实要牵扯到height:100%height: inherit的不同。那就是父级position:static而子级是position: absolute的时候,子元素已经脱离文档流,它的父级就是最近的定位元素。height:100%的对象就不是它真正的父级了。但是height: inherit就不出现这种问题。

参考 张鑫旭:CSS中height:100%和height:inherit的异同

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值