Safari上的CSS网格和绝对定位

Question

我有一个css网格布局的问题。

网格容器是绝对定位的，并且网格模板行包含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: "ab" "cd"; } .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 top: 0; bottom 0更像是一个肮脏的黑客。 只需给.wrapper一个最小高度作为视口的100％ - 100vh。

 .wrapper { min-height: 100vh; }