使用CSS Grid布局在IE浏览器上设置全高度

Question

我开始使用Rachel Andrews的CSS Grid Layout，但是我无法弄清楚如何拉伸包装器。我正在使用她在书籍《Get Ready for CSS Grid Layout》中的第一个示例，稍作修改-全高度。

它在Chrome、FF、Safari、Opera上运行得很完美，但在IE上无法填充整个高度。我正在使用grid系统的IE前缀（-ms-），一切都能正常工作，但不能实现完全高度。

.wrapper {
  display: grid;
  display: -ms-grid;
  grid-template-columns: 12px calc(50vw - 18px) 12px calc(25vw - 18px) 12px calc(25vw - 12px) 12px;
  -ms-grid-columns: 12px calc(50vw - 18px) 12px calc(25vw - 18px) 12px calc(25vw - 12px) 12px;
  grid-template-rows: 12px auto 12px auto 12px;
  -ms-grid-rows: 12px auto 12px auto 12px;
  background-color: #fff;
  color: #444;
  height: 100vh;
}

.box {
  background-color: rgb(120, 70, 123);
  border: 5px solid rgb(88, 55, 112);
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font: 150%/1.3 Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif;
}

.a {
  grid-column: 2 / 3;
  grid-row: 2 / 5;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  -ms-grid-row: 2;
  -ms-grid-row-span: 3;
}

.b {
  grid-column: 4 / 7;
  grid-row: 2 / 3;
  -ms-grid-column: 4;
  -ms-grid-column-span: 3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
}

.c {
  grid-column: 4 / 5;
  grid-row: 4 / 5;
  -ms-grid-column: 4;
  -ms-grid-column-span: 1;
  -ms-grid-row: 4;
  -ms-grid-row-span: 1;
}

.d {
  grid-column: 6 / 7;
  grid-row: 4 / 5;
  -ms-grid-column: 6;
  -ms-grid-column-span: 1;
  -ms-grid-row: 4;
  -ms-grid-row-span: 1;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

同时这里有一个可用的jsfiddle：https://jsfiddle.net/v7d641jb/

（如果你想查看完整的示例，请访问此处：http://legie.kirril.com/www/grid/index.html）

- ondrejko

---

请使用1fr而不是auto来填充整个网格 https://jsfiddle.net/v7d641jb/1/ - G-Cyrillus

Answer 1

虽然CSS Grid规范（IE支持的旧版）确实为grid-rows定义了auto值，但在IE中显然无法正常工作。

简单的解决方案是将auto替换为1fr。

不要这样写：

-ms-grid-rows: 12px auto 12px auto 12px;

试试这个：

-ms-grid-rows: 12px 1fr 12px 1fr 12px;

修订后的fiddle

- Michael Benjamin

---

你是众人中的神。谢谢！ - Lars Holdaas

这个！谢谢。 - ondrejko