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在最初绘制页面时没有正确渲染模态，并且在放大窗口时它没有正确地重新渲染模式。

以下是首次渲染时的显示方式。请注意页脚是如何显示的？

Here's how it appears on first render. Notice how the footer isn't visible?

当您缩小窗口时，它会正确重新渲染： When you make the window smaller, it re-renders correctly.

当您使窗口变大时，它会重新渲染错误： When you make the window bigger, it re-renders incorrectly. 有关如何解决这个或根本原因的任何建议？

Answer 1

我找不到解决我的技术问题的方法，所以我决定使用vh单位来控制模态体的大小，方法this CSS modal does。

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

这是一个codepen：http://codepen.io/cjcenizal/pen/zxMJzb

如何创建适用于IE11的flexbox模式？

1 个答案: