Height:100% 为什么无效??

有时候我们需要让一个DIV的高度自动拉伸为整个屏幕的高度,即100%的高度:

  1. .demo{
  2.     width: 100%;
  3.     height: 100%;
  4.     backgroundurl(big-size-bg.png);
  5. }

假设big-size-bg.png是一张很大的背景图片,那么这样在浏览器中解析的结果是什么都看不见,再用offsetHeight测试结果是0(在IE旧版本测试中不为0,是一个很小的高度),所以上面的 height:100% 根本木有起作用!

原来,页面中的容器(块级元素)的高度在没有设定height的情况下是根据容器的内容来自动拉伸的,所以,.demo的高度其实是body元素的高度,而body元素的高度是html元素的高度,所以,解决的办法是给.demo的所有父元素(即body和html)都加上height:100%

  1. html{
  2.     height: 100%;
  3. }
  4. body{
  5.     height:100%;
  6. }
  7. .demo{
  8.     width: 100%;
  9.     height: 100%;
  10.     backgroundurl(big-size-bg.png);
  11. }

OK,现在再看看,行了吧?

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

墨丶水瓶

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: