d在做任務(wù)14實(shí)戰(zhàn)的時(shí)候，發(fā)現(xiàn)對(duì)header部分的背景圖片使用height：100%并沒有生效，其實(shí)是跟父元素有關(guān)。
先看代碼：
#header{
width: 100%;
height: 100%;
background: url(../img/01_bg.jpg) 0 0 no-repeat;
background-size: cover;
}
上面的CSS代碼所產(chǎn)生的效果并不是我所想的那樣：
高度沒有撐開
需要在父元素添加一個(gè)高度自適應(yīng)：
html,body{
height: 100%;
}
#header{
width: 100%;
height: 100%;
background: url(../img/01_bg.jpg) 0 0 no-repeat;
background-size: cover;
}
圖片顯示完整
在設(shè)置了html和body的height：100%后，header的高度就能自適應(yīng)了。
記得在任務(wù)12的時(shí)候也有一個(gè)width：100%的設(shè)置，這就有一個(gè)結(jié)論，一個(gè)對(duì)象的寬高是否能使用百分比顯示，取決于對(duì)象父元素的設(shè)置。在任務(wù)14中，#header是屬于body的子元素，而在默認(rèn)狀態(tài)下，瀏覽器是不會(huì)給body一個(gè)高度屬性的，所以我們?cè)谠O(shè)置#header的height：100%并沒有達(dá)到我們想要的結(jié)果，但是在給body設(shè)置了100%后，#header的高度設(shè)置就有了效果，這就是瀏覽器解析規(guī)則引發(fā)的高度適應(yīng)的問題。
代碼中除了給出body的height：100%外，對(duì)html也應(yīng)用了同樣的設(shè)置，這樣是為了解決IE瀏覽器和Firefox的兼容問題。
IE中的html對(duì)象是默認(rèn)的100%高度，但是body不是，而在firefox中的html標(biāo)簽不是默認(rèn)100%的高度，因此body和html都設(shè)置height：100%，保證我們的代碼在這兩款瀏覽器中都能正常工作。
