有时候需要一个让一DIV的高度自动拉伸为整个屏幕的高度,即100%的高度:
.demo{ width: 100%; height: 100%; background: url(big-size-bg.png); }
假设big-size-bg.png是一张很大的背景图片,那么这样在浏览器中解析的结果是什么都看不见,再用offsetHeight测试结果是0(在IE旧版本测试中不为0,是一个很小的高度),所以上面的 height:100%根本木有起作用!
原来,页面中的容器(块级元素)的高度在没有设定height的情况下是根据容器的内容来自动拉伸的,所以,.demo的高度其实是body元素的高度,而body元素的高度是html元素的高度,所以,解决的办法是给.demo的所有父元素(body和html)加上height:100%就可以了:
html{ height: 100%; } body{ height:100%; } .demo{ width: 100%; height: 100%; background: url(big-size-bg.png); }
ok,这样就行了。
除了广告和敏感话题言论之外,可以畅所欲言。 | |
为自己起个简短易记的名字。 | |
方便我可以联系到你,绝对不会被公开。 | |
你的个人主页,链接会加在昵称上方便大家访问。 |