100％高度调整问题在IE 11 [英] 100% height resizing issue on IE 11

问题描述

在我的主题中，）。例如：

  header {
 height：800px; // fallback 
 width：100％; 
 height：100vh; 
 background-image：url（'..'）center center no-repeat; 
 background-size：cover; 
} 
  

In my theme, http://ghost-theme-stretch.dreamsonline.net/ the initial header and its inner div is given 100% height.

e.g. HTML structure

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

The code used to stretch these 2 elements to 100% screen height is:

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

I have also used JQuery plugin Backstretch http://srobbin.com/jquery-plugins/backstretch/ to apply a background image to the <div class="site-head-background"></div>.

This works great in Chrome and Firefox, but in IE 11, the image is not stretched completely

I tried lot of things but still lost on how to solve this. Any help would be appreciated.

解决方案

The easiest way to do this without plugins/js is to use the vh unit. It is fully supported in ie 11 (see here). For example:

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

这篇关于100％高度调整问题在IE 11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！