有时候我们需要让一个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,现在再看看,行了吧?
您可以选择一种方式赞助本站
支付宝扫一扫赞助
微信钱包扫描赞助