CODEWITHSUNDEEP
javascriptcsssafaricss-grid
blackmamba
blackmamba

Reputation: 757

CSS Grid and Absolute Positioning on Safari

I have a problem with a css grid layout.

The grid container is absolutely positioned and the grid-template-rows contains an 1fr to allow one row to take all the free space.

This displays correctly on all current browsers except the latest Safari installed with macOS 10.13.2

The issue seems to be caused by it not calculating the freespace if the height is not explicitly set.

Am I missing something or is there a workaround?

jsfiddle example

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>

Upvotes: 10

Views: 1525

Answers (1)

Andrei Fedorov
Andrei Fedorov

Reputation: 3987

In 2017 top: 0; bottom 0 is more like a dirty hack. Just give the .wrapper a minimum height as 100% of the viewport - 100vh.

.wrapper {
  min-height: 100vh;
}

Upvotes: 2

Related Questions