html div背景高度,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;

}

}