height:100% 为什么无效??

有时候需要一个让一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,这样就行了。

评论列表

除了广告和敏感话题言论之外,可以畅所欲言。
为自己起个简短易记的名字。
方便我可以联系到你,绝对不会被公开。
你的个人主页,链接会加在昵称上方便大家访问。