Question

我遇到了css网格布局的问题。

网格容器是绝对定位的，网格模板行包含1fr，允许一行占用所有可用空间。

除了安装了macOS 10.13.2的最新Safari之外，所有当前浏览器都能正确显示

问题似乎是由于如果没有明确设置高度，它不会计算自由空间。

我错过了什么或有解决方法吗？

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

2017年top: 0; bottom 0更像是一个肮脏的黑客。只需将.wrapper的最小高度设为视口的100％ - 100vh。

＆＃13;

.wrapper {
  min-height: 100vh;
}

＆＃13;

Safari上的CSS网格和绝对定位

1 个答案: