IE 11上100％高度调整大小问题

Question

在我的主题中，http://ghost-theme-stretch.dreamsonline.net/初始标题及其内部div的高度为100％。

e.g。 HTML结构

<header id="site-head">
     <div class="site-head-background"></div>
     some content...
</header>

用于将这2个元素拉伸到100％屏幕高度的代码是：

$('.home-template #site-head').css({'height':(($(window).height()-30))+'px'});
$('.home-template .site-head-background').css({'height':(($(window).height()-30))+'px'});

我还使用JQuery插件Backstretch http://srobbin.com/jquery-plugins/backstretch/将背景图片应用于<div class="site-head-background"></div>。

这在Chrome和Firefox中效果很好，但在IE 11中，图像并未完全拉伸

我尝试过很多东西，但仍然没有解决这个问题。任何帮助将不胜感激。

Answer 1

没有插件/ js的最简单方法是使用vh单元。在11中完全支持它（见here）。例如：

header {
    height: 800px; //fallback
    width: 100%;
    height: 100vh;
    background-image: url('..') center center no-repeat;
    background-size: cover;
}