标签：
我在做一个简单的页面背景图时，设置Css3样式中层的高度适宜屏幕高度无效，后来才知道原因
原因：原来html文档，默认标签html、body的宽度为100%，但高度没有，当我们设置div的高度为100%，
是继承上一级标记html、body的高度，所以无效
例子如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试背景图适合全屏</title>
</head>
<style type="text/css">
html,body{
height:100%;
margin:0px;
padding:0px;
}
.box {
height:100%;
width:100%;
background-image:url(../%E7%99%BB%E5%BD%95%E5%9B%BE%E6%A0%871/welcome.png);
background-size:cover;
}
</style>
<body>
<div class="box"></div>
</body>
</html>
先设置html、body的高度为100%，再去设置div的高度100%，宽度100%，这样层就适应屏幕的宽度和高度了
效果图如下：
其他的例子：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试背景图适合全屏</title>
<style type="text/css">
body{
height:100%;
overflow:hidden;
margin:0px;
padding:0px;
}
.box {
height:100%;
position:absolute;
width:100%;
background-image:url(../%E7%99%BB%E5%BD%95%E5%9B%BE%E6%A0%871/welcome.png);
background-size:cover;
}
</style>
</head>
<body>
<div class="box" ></div>
</body>
</html>
这是通过绝对定位的属性，获取上一级标签body的高度，所以div的高度才有效，如果直接设置div
<div style="width:100%;height:100%"></div>是高度是找不到比较的，不知道去跟谁的100%
标签：
原文地址：http://www.cnblogs.com/xielong/p/5610929.html
