想要div铺满全屏,设置height:100%却没有生效 |
您所在的位置:网站首页 › height计算值为auto › 想要div铺满全屏,设置height:100%却没有生效 |
此文为《CSS世界》的读书笔记,书的作者是张鑫旭大佬,人民邮电出版社,2017年12月第一版。 开发遇到的问题某小白想要在页面插入一个div,然后满屏显示背景图,就写了如下的CSS: div { width: 100%; /*这是多余滴*/ height: 100%; /*这是无效滴*/ background: url(bg.jpg); }然后他发现这个div的高度永远是0,小白顿时茫然了。 那么,为何height:100%无效? 其实,规范中给了答案。如果包含块的高度没有显示指定(即高度由内容决定),并且该元素不是绝对定位,则计算值为auto。一句话总结就是:因为解释成了auto。auto和百分比计算,是得不到高度值的。 ‘auto’ * 100/100 = NaN 那么,为何width设置width: 100%却有效 宽度的解释是:如果包含块的宽度取决于该元素的宽度,那么产生的布局在CSS 2.1中是未定义的,也就是说规范没有明确宽度该怎么表示,浏览器可以自己去发挥。根据作者的测试,各个浏览器对宽度的显示都是一致的,因此,就按照包含块的真实的计算值作为百分比计算的基数。 #div1 { height: 100px; display: inline-block; white-space: nowrap; background-color: red; } #span1 { width: 50px; background-color: pink; } #span2 { width: 100%; display: inline-block; background-color: gray; } 2222 hello!结果如图所示: 其实从上面的规范可以看出有两种方法: 1、设定显示的高度值,例如,设置height: 600px; 或者设置可以生效的百分比高度 html, body { height: 100%; /**仅仅设置body或者height是无效的/ }2、使用绝对定位,此时就会满屏显示背景图 body { background: url(bg.jpg); } div { height: 100%; position: absolute; }注意: 绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的,区别在于绝对定位的宽高百分比计算是相对于padding box的,也就是说会把padding大小值计算在内,但是,非绝对定位元素则是相对于 content box 计算的。 可以访问 http://demo.cssworld.cn/3/2-11.php 看出高度的区别 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |