Различия в процентах высоты Chrome / Firefox в сетке CSS - PullRequest
Новая
       18

Различия в процентах высоты Chrome / Firefox в сетке CSS

0 голосов
/ 06 декабря 2018

Обратите внимание, что следующую проблему можно решить, используя единицы измерения fr вместо% и auto, но я ищу объяснение, почему проблема возникает в первую очередь.

В моем коде ниже,

Firefox : не соответствует значениям grid-template-rows.Применяет одинаковую высоту к каждой строке, но элементы сетки не переполняют контейнер.

Chrome : похоже, подчиняется свойству grid-template-rows, но элементы сетки переполняют контейнер.

Изначально я думал, что проблема связана с % , но это допустимая единица для строки.Я поменял значение auto на 10% , но это создало его собственную проблему.

Я посмотрел документацию, но что-то упустил.

У кого-нибудь есть прямое объяснение? 

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 30% auto 60%;
  background-color: #f00;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
}
<div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>

Codepen

Ответы [ 2 ]

0 голосов
/ 06 декабря 2018

Chrome: похоже, подчиняется свойству grid-template-row, но элементы сетки переполняют контейнер.

Я бы лучше сказал, что Chrome делает усилие чтобы это работало, так как расчет как-то сложен, и у нас есть цикл.В основном, процентное значение должно быть разрешено, и изначально (поскольку высота не определена) браузер не может разрешить значения grid-template-rows, поэтому сначала он вычислит высоту оболочки, основываясь на ее содержимом (игнорируя grid-template-rows), и мы будемполучить что-то вроде ниже: 

console.log(document.querySelector('.wrapper').offsetHeight);
body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 30% 30% 30%;
  /*grid-template-rows: 30% auto 60%;*/
  background-color: #f00;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
}
<div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>

На этом шаге Firefox останавливается, но Chrome постарается сделать больше!Обратите внимание на значение высоты, которую мы получили (194px).Теперь мы можем разрешить процентные значения на основе этого значения, и у вас будет это: 

console.log(document.querySelector('.wrapper').offsetHeight);
console.log(document.querySelector('.box:first-child').offsetHeight);
console.log(document.querySelector('.box:last-child').offsetHeight);
body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 30% auto 60%;
  background-color: #f00;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
}
<div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>

Обратите внимание, как первый элемент (первый ряд) имеет высоту, равную 58px (0.3 * 194px), и как последний дочерний элемент(последний ряд) имеет высоту, равную 117px (0.6 * 194px).Логически второй ряд должен иметь высоту 194px - 58px - 117px - 20px(gap) = -1, что недостаточно, поэтому он будет иметь большую высоту, таким образом, переполнение.

Переполнение на самом деле не проблема, а побочный эффект этого сложный расчет, и вы всегда будете иметь его, если вы не определите процентное значение для каждой строки меньше (100% - 20px/3 = 33.33% - 6.67px). 

console.log(document.querySelector('.wrapper').offsetHeight);
console.log(document.querySelector('.box:first-child').offsetHeight);
console.log(document.querySelector('.box:last-child').offsetHeight);
body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 20% 20% 20%;
  background-color: #f00;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
}
<div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>

Также браузер не вернется, чтобы исправить эту проблему, увеличив высоту оболочки, поскольку у нас будет цикл с grid-template-rowsбыл определен на основе этого.

Аналогичный вопрос: Процент зазора сетки без высоты

0 голосов
/ 06 декабря 2018

Первоначально я думал, что проблема была с % , но это допустимая единица для строки.Я поменял значение auto на 10% , но это создало его собственную проблему.У кого-нибудь есть прямое объяснение?

Проблема на самом деле заключается в использовании % единиц.

Прямое объяснение состоит в том, что длины в процентах обрабатываются по-разному в браузерах если в родительском контейнере нет определенной или унаследованной длины .

Следовательно, поскольку контейнер сетки не имеет определенной высоты, браузеры будут отображать высоты строк, которые определены в процентах, непоследовательно.

Эти варианты подробно рассматриваются в следующих статьях:

Простое решение - определить высоту контейнера .В моем примере ниже, я добавил height: 300px к .wrapper.Теперь строки отображаются одинаково во всех браузерах. 

.wrapper {
  height: 300px; /* new */
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 30% auto 60%;
  background-color: #f00;
  color: #444;
}

.box {
  background-color: lightblue;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
}
<div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>
...