html - 平板电脑/手机中的错误，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;
}

我尝试了不同的选择，

高度:100%

但它们不起作用。

Answer 1

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

如果你只想使用 css 百分比高度，你应该添加到父元素 height: 100% 现在你可以设置里面的元素(例如 body ) 到 最小高度:100%:

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);