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