首页 新闻 搜索 专区 学院

containing block

0
悬赏园豆:5 [已解决问题] 解决于 2013-12-24 20:38

css code:

.normal{height: 2000px;background: #666;}
.test{position: absolute;top:0;left:0;width: 100%;height: 100%;background: #ff0;}

 

html code:

<div class="normal"></div>
<div class="test"></div>

 

这里的test的containing block应该是根元素,但是测试发现高度却是视口的高度?

问题补充:

我想要100%是相对整个文档的宽高该怎么做?

三剑客的主页 三剑客 | 初学一级 | 园豆:92
提问于:2013-12-23 22:06
< >
分享
最佳答案
0

.test的样式 position:absolute ,这里是绝对定位,是以浏览器边界为参照并且脱离Html 流,脱离Html流后不会占用原来的位置,所以normal会占用test原有的位置,所以你可以看到test是在normal之上的,再因为test的height为100% 这里指的就是浏览器的高度。所以就是窗口的高度

收获园豆:5
Zery | 大侠五级 |园豆:6069 | 2013-12-23 22:28

我的问题就是为什么这个100%是相对浏览器视口的而不是相对根节点

三剑客 | 园豆:92 (初学一级) | 2013-12-24 12:23

@三剑客: 

这是position样式 决定的 absolute 是绝对定位 以浏览器边框为参照,relative 是相对定位 是以父元素为参照 你可以详细了解下 position,不同属性的意思

Zery | 园豆:6069 (大侠五级) | 2013-12-24 12:42
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册