Элементы сетки CSS переполняют контейнер сетки при использовании align-content: space-between и липкого заголовка

У меня есть базовый макет, в котором моя сетка CSS расположена внутри гибкого макета, так что сетка занимает все доступное пространство, оставшееся за пределами нижнего колонтитула.

Заголовок позиционируется как position: sticky;.

Элементы в сетке не занимают всю доступную высоту в сетке.

В моем макете сетки CSS я использую align-content: space-between;, чтобы оба элемента располагались вверху и внизу сетки с некоторым пустым пространством между ними.

Это выглядит хорошо в Chrome и на FF, но в Safari (Mac и iOS) второй элемент сетки помещается за пределы сетки (по высоте моего липкого заголовка).

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  text-align: center;
}

.flex {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 999999;
  padding: 3em;
  background-color: tomato;
}


footer {
  padding: 1em;
  background-color: tomato;
}

.grid {
  width: 100%;
  -webkit-flex: 1;
  flex: 1;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto;
  -webkit-align-content: space-between;
  align-content: space-between;
  background-color: khaki;
}

.item {
  box-sizing: border-box;
  padding: 0.6em;
}

.pink {
  background-color: pink;
}

.orange {
  background-color: orange;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <div class="flex">
      <header>Header</header>
      <div class="grid">
        <div class="item pink">Item 1</div>
        <div class="item orange">Item 2</div>
      </div>
      <footer>Footer</footer>
    </div>  
  </body>
</html>


html css css-grid safari
person flavordaaave    schedule 15.01.2019    source источник
comment
У меня сейчас нет доступа к Safari, но ваши вопросы и ответы напоминают об этом: stackoverflow.com/q/40490954/3597276   -  person Michael Benjamin    schedule 16.01.2019
comment
Вам также может понадобиться определить высоту контейнера сетки, чтобы align-content: space-between работало правильно в Safari. stackoverflow.com/q/33636796/3597276   -  person Michael Benjamin    schedule 16.01.2019
comment
@Michael_B спасибо! Кажется, это та же проблема в Safari. Изменение min-height: 100vh; на height: 100vh; в контейнере .flex устраняет проблему.   -  person flavordaaave    schedule 17.01.2019

Ответы (1)


arrow_upward
1
arrow_downward

Я каким-то образом «исправил» это, поместив всю страницу в другую сетку. Но я был бы очень признателен, если бы кто-то придумал лучшее/более чистое решение для этого.

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  text-align: center;
}

.wrapper {
  min-height: 100vh;
  width: 100%;
  display: grid;
  flex-direction: column;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
}

.flex {
  align-self: stretch;
  justify-self: stretch;
  background-color: lime;
  display: flex;
  flex-direction: column;
}

header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 999999;
  padding: 3em;
  background-color: tomato;
}


footer {
  padding: 1em;
  background-color: tomato;
}

.grid {
  width: 100%;
  -webkit-flex: 1;
  flex: 1;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto;
  -webkit-align-content: space-between;
  align-content: space-between;
  background-color: khaki;
}

.item {
  box-sizing: border-box;
  padding: 0.6em;
}

.pink {
  background-color: pink;
}

.orange {
  background-color: orange;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <div class="wrapper">
      <div class="flex">
        <header>Header</header>
        <div class="grid">
          <div class="item pink">Item 2</div>
          <div class="item orange">Item 2</div>
        </div>
        <footer>Footer</footer>
      </div>  
    </div>
  </body>
</html>

ОБНОВЛЕНИЕ: благодаря комментарию @Michael_B я нашел более чистый способ исправить это, изменив min-height: 100%; на height: 100%; в контейнере .flex.

person flavordaaave    schedule 15.01.2019