css - 如何创建适用于 IE11 的 flexbox 模态框？

Question

我已经使用 flexbox 实现了这个模式，因为我想要一个粘性的页眉和页脚。我的解决方案适用于 Chrome 和 Firefox:http://codepen.io/cjcenizal/pen/JomaNo

Jade 中的标记:

.blackout
  .flexModal
    .flexModal__inner
      .flexModal__header
        | Header
      .flexModal__body
        p Body content
      .flexModal__footer
        | Footer

SCSS:

.blackout {
  background-color: rgba(black, .5);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

  .flexModal {
    max-height: calc(100% - 40px);
    min-width: 400px;
    background-color: white;
    display: flex;
    flex-direction: column;
  }

    .flexModal__inner {
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }

    .flexModal__header {
      display: flex;
      flex-shrink: 0;
    }

    .flexModal__body {
      flex-shrink: 1;
      overflow: auto;
    }

    .flexModal__footer {
      display: flex;
      flex-shrink: 0;
    }

问题是 IE11 在最初绘制页面时无法正确呈现模式，并且在放大窗口时也无法正确重新呈现它。

这是它在第一次渲染时的样子。请注意页脚是如何不可见的？

当您缩小窗口时，它会正确重新呈现:

当您将窗口变大时，它会错误地重新呈现: 关于如何解决这个问题或根本原因是什么的任何建议？

Answer 1

我找不到解决我的技术问题的方法，所以我决定使用 vh 单元来实现我的模态，以控制模态主体的大小，方法相同 this CSS modal does .

通过在模态主体上设置max-height: calc(100vh - {header + footer height + modal and edge of browser window})，你可以得到主体相对于窗口的高度调整大小，这是期望的结果。

这是一个代码笔:http://codepen.io/cjcenizal/pen/zxMJzb