平板电脑/手机中的错误，css 100vh高度不起作用

Question

http://my.jetscreenshot.com/demo/20150924-m0uf-62kb

我不知道为什么这是白色的。

html{
    height: auto !important;
    min-height: 100vh;
}

body {
  min-height: 100vh;
  margin:10px;
  position:absolute; top:0; bottom:0; right:0; left:0;
}

我尝试了不同的选择，

height:100%

但它们不起作用。

Answer 1

vh的视口单元是css中的选项，并非所有浏览器都支持：http://caniuse.com/#feat=viewport-units

如果您只想使用css百分比高度，则应添加到父元素height: 100%，现在您可以将内部元素（例如body）设置为min-height: 100%：< / p>

html {
    height: 100%;
}
body {
    min-height: 100%;
}

您可以选择使用javascript（在html页面的底部）设置元素的样式：

function sizeFullHeight() {
    document.getElementsByTagName("html")[0].style.minHeight = window.innerHeight+'px';
    document.getElementsByTagName("body")[0].style.minHeight = window.innerHeight+'px';
}

sizeFullHeight();
window.onresize = sizeFullHeight;

或使用jquery：

function sizeFullHeight() {
    $('html').css("min-height",$(window).height());
    $('body').css("min-height",$(window).height());
}
$(document).ready(sizeFullHeight);
$(window).resize(sizeFullHeight);