這是一個(gè)小問(wèn)題膨报，但卻困擾我了一段時(shí)間适荣。我的需求是當(dāng) body 標(biāo)簽內(nèi)的內(nèi)容高度小于瀏覽器可視區(qū)域的高度時(shí)，使其高度等于可視區(qū)域的高度够吩，即高度不足時(shí)也要撐滿可視區(qū)域丈氓。
google 了一下后，我得到了這樣的解決方案：
html, body {
height: 100%;
}
這解決了高度不足時(shí)的需求万俗，但同時(shí)也帶來(lái)了另一個(gè)問(wèn)題，即 body 的高度被限死了迄本，高度不足時(shí)课竣，它可以撐滿可視區(qū)域，但當(dāng) body 的內(nèi)容高度超出可視區(qū)域時(shí)公条，它的高度卻也不會(huì)隨之增加迂曲。
很顯然，我需要新的方案路捧。于是，我想到了 min-height 屬性队寇，即最小高度章姓。
html, body {
min-height: 100%;
}
于是我把 html识埋、body 的 min-height 設(shè)置為 100%零渐，但很不幸，失敗了惠豺。設(shè)置之后风宁，html 的高度如愿以償，body 卻一如既往杀糯。
到了這一步苍苞，我很困惑。為什么 html 有了高度骂际，body 卻沒(méi)有冈欢。于是我緊接著又嘗試了一次。
html {
min-height: 100%;
}
body {
height: 100%;
}
再一次失敗凑耻。
這一次我沉下心來(lái)，仔細(xì)思考了一下香浩。我突然想到了 min-height 的百分比可能不是來(lái)源于父標(biāo)簽的 min-height，而是 height餐弱。于是我想到了解決辦法囱晴。
html {
height: 100%;
}
body {
min-height: 100%;
}
最終的結(jié)果也證實(shí)了我的想法，html驮瞧、body 標(biāo)簽的高度在高度不足時(shí)都撐滿了可視區(qū)域枯芬，當(dāng)內(nèi)容高度超過(guò)可視區(qū)域時(shí)幢尚，它們也會(huì)被內(nèi)容撐的更大翅楼。
