如何在 IE11 中修复 Flexbox 粘滞页脚

Posted 2023-03-05

【中文标题】如何在 IE11 中修复 Flexbox 粘滞页脚

【英文标题】：How Do I Fix A Flexbox Sticky Footer In IE11

【发布时间】：2015-10-28 09:15:44

【问题描述】：

我使用 flexbox 创建了一个粘性页脚。它适用于除 IE11 之外的所有浏览器。

Codepen

html 
  box-sizing: border-box;


*, *:before, *:after 
  box-sizing: inherit;


.Page 
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  flex: 1;


.Page-header 
  background: blue;


.Page-footer 
  background: green;


.Page-body 
  background: red;
  flex: 1;

<div class="Page">
  <header class="Page-header">
    HEADER
  </header>
  <div class="Page-body">
    BODY
  </div>
  <footer class="Page-footer">
    FOOTER
  </footer>
</div>

为什么会在 IE11 中中断，我该如何解决？

【参考方案1】：

问题是在 IE11 中 flexbox 不支持min-height，因此 flex box 折叠到其内容的高度。

你可以通过将你的 flexbox 包裹在另一个也有 flex-direction: column 的 flexbox 中来修复它。您还需要在原始 flexbox 上设置 flex: 1。出于某种原因，这会强制嵌套的 flexbox 尊重它的任何 min-height。

Codepen

html 
  box-sizing: border-box;


*, *:before, *:after 
  box-sizing: inherit;


.Wrapper 
  display: flex;
  flex-direction: column;


.Page 
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  flex: 1;


.Page-header 
  background: blue;


.Page-footer 
  background: green;


.Page-body 
  background: red;
  flex: 1;

<div class="Wrapper">
  <div class="Page">
    <header class="Page-header">
      HEADER
    </header>
    <div class="Page-body">
      BODY
    </div>
    <footer class="Page-footer">
      FOOTER
    </footer>
  </div>
</div>

【讨论】：

当.Page-body 的内容变得大于它的父高度时在IE11 中不起作用：codepen

@Cake_Seller，当内部内容比父容器大时，你解决了这个问题吗？

@ArtyomPranovich 不，很遗憾没有。

我将这些样式添加到body display: flex; width: 100%; flex-direction: column; （我的正文只包含一个div#app，就像许多webapps 所做的那样，并且具有与上面.Page 相同的作用）并且事情似乎很好在 IE11、Edge 和 Windows Chrome 中。短页和长页。

在 .Page-body 上执行 flex-grow:1 和 flex-shrink:0 代替 flex:1。这对我有用。

【参考方案2】：

试试

flex: 1 0 auto;

内容块

【讨论】：

奇数。对我来说，它在 IE11 中不起作用。正文/内容只是获取单行文本的高度。

经过一些修补后，当我还添加body display: flex 时，它似乎确实有效。不知道为什么。

@ACJ 我有点迟到了，但是 flex 属性只适用于使用 flex 显示的元素。 flexbox 机制引入了很多很酷的特性。您可以查看here。

@IonuțCiuta，我的观点更加微妙。 OP 已经将 flex 显示设置为容器 (.Page)。但是，如果我也将弹性显示应用于body，我只能达到预期的结果，这似乎不相关。我最好的猜测是，这是 IE11 渲染引擎处理 flex 模型的特定方式的产物。

天哪。 2年后来到这里。几周来一直在尝试修复 IE7 中的 flexbox，这终于是我一直在寻找的解决方案。谢谢！

【参考方案3】：

我使用 flexbug's recommendation of changing min-height on the body to just height 解决了这个问题

仅适用于某些情况，粘性页脚似乎是常见的用例之一。