Safari上的CSS网格和绝对位置

Question

我对CSS网格布局有疑问。

网格容器的位置绝对正确，并且grid-template-rows包含1fr，以允许一行占用所有可用空间。

这会在所有当前的浏览器上正确显示，但与macOS 10.13.2一起安装的最新Safari除外

如果未明确设置高度，则似乎是由于未计算自由空间而引起的。

我是否缺少某些东西或有解决方法？

jsfiddle示例

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-rows: 1fr 150px;
  grid-template-columns: 1fr 150px;
  grid-template-areas: "a b" "c d";
}

.wrapper>div {
  outline: solid 1px #aaa;
  padding: 10px;
}

.game {
  grid-area: a;
}

.player {
  grid-area: b;
}

.rules {
  grid-area: d;
}

.controls {
  grid-area: c;
}

<div class="wrapper">
  <div class="game">game</div>
  <div class="player">player</div>
  <div class="rules">rules</div>
  <div class="controls">controls</div>
</div>

Answer 1

2017 年top: 0; bottom 0更像是一场肮脏的黑客攻击。只需将.wrapper最小高度指定为视口的 100% - 100vh。

.wrapper {
  min-height: 100vh;
}