检测

Question

我尝试使用基于弹性工具箱的布局为我的网页获取粘性页脚。这适用于Chrome和Firefox，但在IE11中，页脚位于我的主要内容之后。换句话说，主要内容不会被拉伸以填满所有可用空间。

此处示例 - 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;
}

在IE中 - 当以vh为单位测量容器高度单位时，如何让主要元素在flex布局中拉伸？我想看看这种行为是否是IE实现flexbox规范的错误的结果，但我在其他地方找不到这个问题。

Answer 1

问题不是vh单位，而是min-height

我找到了一个半工作的CSS解决方案：

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

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

由于这还不够，我在JS中提出了一个解决方案：

检测

此功能测试错误：true表示它有错误。

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

修复

此修复包括手动设置height

中元素的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'; 
}

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

用法

一旦定义了这两个函数，就这样设置：

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

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

演示

＆＃13;

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

＆＃13;

.half-screen {
  display:-ms-flexbox;
  display: flex;
  min-height: 50vh;

  padding: 10px;
  background: #97cef0;
}


.content {
  padding: 10px;
  background: #b5daf0;
}

＆＃13;

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>

＆＃13;

Answer 2

我昨天遇到了同样的错误，也无法自己解决。不幸的是，目前似乎没有什么可以做的，因为它是IE漏洞，几乎在一年前就向微软开发人员报告了，这里：

https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

Answer 3

我发现在IE11中使粘性页脚工作的诀窍是确保flex-basis为100%甚至100vh。请参阅下面的示例或您可以在IE11中测试的live Codepen example。

＆＃13;

html {
  display: flex;
  flex-direction: column;
}

body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 100%;
  min-height: 100vh;
}

header {
  padding: 32px;
  background-color: seagreen;
}

main {
  flex-grow: 1;
  padding: 32px;
  background-color: rgba(0, 0, 0, 0.05);
}

footer {
  padding: 32px;
  background-color: coral;
}

＆＃13;

<header>
  Header
</header>
<main>
  <p>I will not skateboard in the halls.</p>
  <p>I will not skateboard in the halls.</p>
  <p>I will not skateboard in the halls.</p>
  <p>I will not skateboard in the halls.</p>
  <p>I will not skateboard in the halls.</p>
  <p>I will not skateboard in the halls.</p>
  <p>I will not skateboard in the halls.</p>
  <p>I will not skateboard in the halls.</p>
  <p>I will not skateboard in the halls.</p>
  <p>I will not skateboard in the halls.</p>
  <p>I will not skateboard in the halls.</p>
</main>
<footer>
  Footer
</footer>

＆＃13;

Answer 4

通常这会有所帮助：

html, body {
   height: 100%;
}

..而且您不必使用vh单位。

完整样本：

* {
  margin: 0;
}
html,
body {
  height: 100%;
}
body {
  border: red 1px solid;
  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;
  -webkit-flex: 1;
  flex: 1;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

<header>
  <h1>Herons - How they plan to eat your eyes!</h1>
</header>
<main>
  Herons are foul and devious birds.
</main>
<footer>
  <small>© 2014 Institute for the prevention of Herons</small>
</footer>

IE11 - flexbox和vh高度单位不兼容？

4 个答案:

检测

修复

用法

演示