CSS高度自适应的问题

d在做任务14实战的时候，发现对header部分的背景图片使用height：100%并没有生效，其实是跟父元素有关。
先看代码：

#header{
    width: 100%;
    height: 100%;
    background: url(../img/01_bg.jpg) 0 0 no-repeat;
    background-size: cover;
}

上面的CSS代码所产生的效果并不是我所想的那样：

高度没有撑开

需要在父元素添加一个高度自适应：

html,body{
    height: 100%;
}
#header{
    width: 100%;
    height: 100%;
    background: url(../img/01_bg.jpg) 0 0 no-repeat;
    background-size: cover;
}

图片显示完整

在设置了html和body的height：100%后，header的高度就能自适应了。
记得在任务12的时候也有一个width：100%的设置，这就有一个结论，一个对象的宽高是否能使用百分比显示，取决于对象父元素的设置。在任务14中，#header是属于body的子元素，而在默认状态下，浏览器是不会给body一个高度属性的，所以我们在设置#header的height：100%并没有达到我们想要的结果，但是在给body设置了100%后，#header的高度设置就有了效果，这就是浏览器解析规则引发的高度适应的问题。

代码中除了给出body的height：100%外，对html也应用了同样的设置，这样是为了解决IE浏览器和Firefox的兼容问题。
IE中的html对象是默认的100%高度，但是body不是，而在firefox中的html标签不是默认100%的高度，因此body和html都设置height：100%，保证我们的代码在这两款浏览器中都能正常工作。