本文介绍了IE11 - flexbox和vh高度单位不兼容？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想使用基于flexbox的布局来获取我的页面的粘性页脚。这在Chrome和Firefox中工作得很好，但在IE11中，页脚位于我的主要内容之后。

这里的例子 -

HTML：

 < body> 
< header role =banner>< h1> ..< / h1>< / header> 
< main role =main> 
< p> .....< / p> 
< / main> 
< footer> ...< / footer> 
< / body>

CSS：

  body {
 border：red 1px solid; 
 min-height：100vh; 
 display：-ms-flexbox; 
 display：-webkit-flex; 
 display：flex; 
 -ms-flex-direction：column; 
 -webkit-flex-direction：column; 
 flex-direction：column; 
} 
 
 header，footer {
 background：＃dd55dd; 
} 
 
 main {
 background：＃87ccfc; 
 -ms-flex：1 0 auto; 
 -webkit-flex：1 0 auto; 
 flex：1 0 auto; 
}

在IE中 - 我如何获得主要元素在弹性布局当容器高度单位是以vh？我想看看这种行为是否是IE实现flexbox规格的错误的结果，但我在其他地方找不到任何提到这个问题。

解决方案

问题不是 vh 单位，而

我发现一个半工作的纯CSS解决方案：

  min-height：100vh; 
 height：100px;

额外的 height 即使内容不够高也能垂直显示屏幕。缺点是如果IE比视口长，IE将不再包装内容。

由于这还不够在JS中创建了一个解决方案：

检测

此函数测试错误： true 意味着它是有问题的。

  function hasBug（）{
 // inner应该填充外
 //如果inner的height为0，浏览器有bug 
 
 //设置
 var outer = document.createElement（'div' ）; 
 var inner = document.createElement（'div'）; 
 outer.setAttribute（'style'，'display：-ms-flexbox; display：flex; min-height：100vh;'）; 
 outer.appendChild（inner）; 
（document.body || document.documentElement）.appendChild（outer）; 
 
 // test 
 var bug =！inner.offsetHeight; 
 
 // remove setup 
 outer.parentNode.removeChild（outer）; 
 
 return bug; 
}

修正

修复包括手动设置 px

中的元素的 height

  function fixElementHeight（el）{
 //重置任何先前设置的高度
 el.style.height ='auto' ; 
 
 //获取el height（通过vh中的min-height设置的值）
 var height = el.offsetHeight; 
 
 //手动设置像素
 el.style.height = height +'px'; 
}

元素的高度将精确设置为其内容的高度。 height 用作IE中的辅助 min-height ，使用在仅限CSS解决方案中观察到的行为。 / p>

用法

定义这两个函数后，按以下方式设置：

  if（hasBug（））{
 //修复元素现在
 fixElementHeight 
 
 //更新resize的高度
 window.addEventListener（'resize'，function（）{
 fixElementHeight（el）; 
}）; 
}

演示

 function hasBug（）{//内部应填充外部//如果内部的高度为0，浏览器有错误/ / set up var outer = document.createElement（'div'）; var inner = document.createElement（'div'）; outer.setAttribute（'style'，'display：-ms-flexbox; display：flex; min-height：100vh;'）; outer.appendChild（inner）; （document.body || document.documentElement）.appendChild（outer）; // test var bug =！inner.offsetHeight; // remove setup outer.parentNode.removeChild（outer）;返回错误;} function fixElementHeight（el）{//重置任何先前设置的高度el.style.height ='auto'; // get el height（the set set by min-height in vh）var height = el.offsetHeight; //手动设置像素el.style.height = height +'px'; };}} var output = document.getElementById（'output'）; output.innerHTML = hasBug（）？'Browser is buggy' ）{//修复元素现在fixElementHeight（el）; //更新高度调整window.addEventListener（'resize'，function（）{fixElementHeight（el）;}）;}

  .half-screen {display：-ms-flexbox;显示：flex; min-height：50vh; padding：10px; background：＃97cef0;}。content {padding：10px; background：＃b5daf0;}

  < div class =half-screenid =flex> < div class =contentid =output>文本< / div>< / div>

I'm trying to use a flexbox based layout to get a sticky footer for my page. This works well in Chrome and Firefox but in IE11 the footer sits just after my main content. In other words the main content isn't streched to fill all of the availible space.

Example here - http://jsfiddle.net/ritchieallen/3tpuryso/

HTML:

<body>
    <header role="banner"><h1> .. </h1></header>
    <main role="main">
        <p>.....</p>
    </main>
    <footer>...</footer>
</body>

CSS:

body {
    border: red 1px solid;
    min-height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

header, footer  {
    background: #dd55dd;
}

main {
    background: #87ccfc;
    -ms-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
}

In IE - How can I get the main element to stretch in a flex layout when the containers height units are measured in vh? I was looking to see if this behaviour is the result of a bug in the way IE implements the flexbox specs but I couldn't find any mention of this problem elsewhere.

解决方案

The issue isn't vh units but min-height

I found a semi-working CSS-only solution:

min-height: 100vh;
height: 100px;

The extra height will enable IE to fill the screen vertically even if the content is not tall enough. The drawback is that IE will no longer wrap the content if it's longer than the viewport.

Since this is not enough I made a solution in JS:

Detection

This function tests the bug: true means it's buggy.

function hasBug () {
    // inner should fill outer
    // if inner's height is 0, the browser has the bug

    // set up
    var outer = document.createElement('div');
    var inner = document.createElement('div');
    outer.setAttribute('style', 'display:-ms-flexbox; display:flex; min-height:100vh;');
    outer.appendChild(inner);
    (document.body || document.documentElement).appendChild(outer);

    // test
    var bug = !inner.offsetHeight;

    // remove setup
    outer.parentNode.removeChild(outer);

    return bug;
}

Fix

The fix consists of manually setting the height of the element in px

function fixElementHeight (el) {
    // reset any previously set height
    el.style.height = 'auto';

    // get el height (the one set via min-height in vh)
    var height = el.offsetHeight;

    // manually set it in pixels
    el.style.height = height + 'px';
}

The element's height will be set to exactly the height of its content. height is used as a secondary min-height in IE, using the behavior observed in the CSS-only solution.

Usage

Once those two functions are defined, set it up this way:

if(hasBug()) {
    // fix the element now
    fixElementHeight(el);

    // update the height on resize
    window.addEventListener('resize', function () {
        fixElementHeight(el);
    });
}

Demo

function hasBug () {
    // inner should fill outer
    // if inner's height is 0, the browser has the bug

    // set up
    var outer = document.createElement('div');
    var inner = document.createElement('div');
    outer.setAttribute('style', 'display:-ms-flexbox; display:flex; min-height:100vh;');
    outer.appendChild(inner);
    (document.body || document.documentElement).appendChild(outer);

    // test
    var bug = !inner.offsetHeight;

    // remove setup
    outer.parentNode.removeChild(outer);

    return bug;
}

function fixElementHeight (el) {
    // reset any previously set height
    el.style.height = 'auto';

    // get el height (the one set via min-height in vh)
    var height = el.offsetHeight;

    // manually set it in pixels
    el.style.height = height + 'px';
}

var output = document.getElementById('output');
output.innerHTML = hasBug()?'Browser is buggy':'Browser works correctly';


var el = document.getElementById('flex');

if(hasBug()) {
  // fix the element now
  fixElementHeight(el);

  // update the height on resize
  window.addEventListener('resize', function () {
    fixElementHeight(el);
  });
}

.half-screen {
  display:-ms-flexbox;
  display: flex;
  min-height: 50vh;

  padding: 10px;
  background: #97cef0;
}


.content {
  padding: 10px;
  background: #b5daf0;
}

The inner box should fill the outer box vertically, even if the browser is buggy.
<div class="half-screen" id="flex">
  <div class="content" id="output">
    Text
  </div>
</div>

这篇关于IE11 - flexbox和vh高度单位不兼容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！