css只有背景的情况，如果让页面撑开高度

今天遇到一个情况，css布局的时候只有背景和一个底部元素，由于背景无法撑开高度，如果定义min-height并不能自适应手机高度，用js处理并不完美，然后发现一个css3新的单位元素vh和vw(视口高度和宽度),按照视口单位，默认手机屏幕的高度和宽度是100vh和100vw，然后我把body高度设置为100vh，那么主div高度自动撑高为视口高度并且是自适应的，very good!,学习了

听说ios下vh单位有适配问题，加上解决方案:

/* fix iOS bug not displaying 100vh correctly */
/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
.fullheight {
height: 768px;
}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.fullheight {
height: 1024px;
}
}
/* iphone5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-
pixel-ratio: 2) {
.fullheight {
height: 320px;
}
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-
pixel-ratio: 2) {
.fullheight {
height: 568px;
}
}
/* iPhone 4 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-
device-pixel-ratio : 2) {
.fullheight {
height: 320px;
}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-
device-pixel-ratio : 2) {
.fullheight {
height: 480px;
}
}