这是一个小问题,但却困扰我了一段时间。我的需求是当 body 标签内的内容高度小于浏览器可视区域的高度时,使其高度等于可视区域的高度,即高度不足时也要撑满可视区域。
google 了一下后,我得到了这样的解决方案:
html, body {
height: 100%;
}
这解决了高度不足时的需求,但同时也带来了另一个问题,即 body 的高度被限死了,高度不足时,它可以撑满可视区域,但当 body 的内容高度超出可视区域时,它的高度却也不会随之增加。
很显然,我需要新的方案。于是,我想到了 min-height 属性,即最小高度。
html, body {
min-height: 100%;
}
于是我把 html、body 的 min-height 设置为 100%,但很不幸,失败了。设置之后,html 的高度如愿以偿,body 却一如既往。
到了这一步,我很困惑。为什么 html 有了高度,body 却没有。于是我紧接着又尝试了一次。
html {
min-height: 100%;
}
body {
height: 100%;
}
再一次失败。
这一次我沉下心来,仔细思考了一下。我突然想到了 min-height 的百分比可能不是来源于父标签的 min-height,而是 height。于是我想到了解决办法。
html {
height: 100%;
}
body {
min-height: 100%;
}
最终的结果也证实了我的想法,html、body 标签的高度在高度不足时都撑满了可视区域,当内容高度超过可视区域时,它们也会被内容撑的更大。