html - 在 IE 上全高的 CSS 网格布局

Question

我开始使用伟大的 Rachel Andrews 的 CSS Grid Layout，但我不知道如何拉伸(stretch)包装器。我使用的是她在 Get Ready for CSS Grid Layout 一书中的第一个示例，稍作修改 - 全高。

它在 Chrome、FF、Safari、Opera 上运行完美——但在 IE 上无法填满整个高度。我正在为网格系统 (-ms-) 使用 IE 前缀，一切正常但不是全高。

.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 )

Answer 1

尽管 CSS Grid Spec ( the older one which is supported by IE ) 确实为 grid-rows 定义了一个 auto 值，但显然它在 IE 中不起作用。

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

取而代之的是:

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

试试这个:

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

revised fiddle