html – Flexbox在Internet Explorer 11中不起作用

这段代码在Firefox,Chrome和Edge中工作正常,但由于flex模型,IE11中的操作不正常.我该如何解决？

这是Firefox的外观

这是IE11的外观

body * {
  Box-sizing: border-Box;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-flow: column;
  margin: 0;
}
main {
  flex: 1;
  display: flex;
}
header,footer {
  background: #7092BF;
  border: solid;
  width: 100%;
}
section {
  border: solid;
  background: #9AD9EA;
  flex: 1
}
aside {
  border: solid;
  width: 150px;
  background: #3E48CC
}

<header>
  <p>header
</header>
<main>
  <aside>
    <p>aside
    <p>aside
  </aside>
  <section>
    <p>content
    <p>content
    <p>content
    <p>content
  </section>
</main>
<footer>
  <p>footer
  <p>footer
</footer>

解决方法

这可能与IE11上的最小高度 bug相关,请尝试：

改变身体{min-height：100％; }到body {height：100％; }

如果你的内容很长,需要滚动,请添加：

section { overflow: auto; }

jsFiddle

body * {
  Box-sizing: border-Box;
}
html {
  height: 100%;
}
body {
  /* min-height: 100%; */
  height: 100%; /*added*/
  display: flex;
  flex-flow: column;
  margin: 0;
}
main {
  flex: 1;
  display: flex;
}
header,footer {
  background: #7092BF;
  border: solid;
  width: 100%;
}
section {
  overflow: auto; /*added*/
  border: solid;
  background: #9AD9EA;
  flex: 1
}
aside {
  border: solid;
  width: 150px;
  background: #3E48CC
}

<header>
  <p>header
</header>
<main>
  <aside>
    <p>aside
    <p>aside
  </aside>
  <section>
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
  </section>
</main>
<footer>
  <p>footer
  <p>footer
</footer>