前言
为什么我明明设置了 height: XX%,却不起作用?对于这个问题,我想熟悉CSS的都知道怎么解决。但这背后的原理你知道吗?今天我就带大家来了解一下为什么 height: XX%会不起作用。
解决height: XX%不起作用
咱也不买官司,解决height百分比不好使的办法很简单,就是父级元素必须得有一个可以生效的高度值。
例如,张三想要在页面插入一个<div>
,然后使其满屏显示:
div {
height: 100%; /* 这是无效的 */
background: url(xxx.jpg);
}
然而,他发现这样设置<div>
高度永远是 0,哪怕其父级塞满了其他内容也是这样。
想要实现满屏的效果,他还需要设置html, body
才行:
html, body {
height: 100%;
}
并且仅仅设置body
也是不行的,因为此时的也没有具体的高度值:
因此经过实践,我们都会发现对于普通文档流中的元素,百分比高度值要想起作用, 其父级必须有一个可以生效的高度值。
为何 height: xx%无效
原因在于,CSS 的默认流是水平方向的,宽度是稀缺的,高度是无限的。因此,宽度的分配规则就比较复杂,高度就显得比较随意。
并且规范中也给出了答案:
如果‘块’的高度没有显式指定(即高度由内容撑起来的),并且该元素不是绝对定位,则height值为 auto。
简单理解就是:因为父元素height值为 auto。auto 和百分比计算,算不了。
‘auto’ * 100/100 = NaN ,所以height百分比不起作用。
如何让 height: xx%有效
如何让 height: xx%有效?有两种方法:
(1)显式设定高度值。这个上面以及说过了,这里就不过多赘述了。
(2)使用绝对定位。使用绝对定位的元素,即使祖先元素的 height 值为 auto 也使用height百分比有效。
但需要注意:绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的。
绝对定位元素与和非绝对定位元素的百分比计算区别
绝对定位的宽高百分比计算是相对于 padding box 的,会把 padding 大小值计算在内:
而非绝对定位元素则是相对于 content box 计算的,不会把 padding 大小值计算在内:
结语
本文到此结束
如果大家还有什么其他想法,欢迎在评论区交流!