Галерея Susy поднимает высоту для таблицы отображения и таблицы-ячейки

Я пытаюсь получить столбцы с одинаковой высотой в моей чувствительной сетке, используя галерею mixin для SUSY. Для этого я устанавливаю контейнер "display: table" и столбец "display: table-cell". Это работает для меня, если я не использую mixin, но не сработает, как только включу mixin. Mixin работает, если я установил высоту в пикселях, но не если я установил высоту с использованием 100%;

Я использую:

  • susy (2.1.3) и
  • sass (~> 3.3)

Это работает с SUSY или без него:

.ttable {
 @include container;
 padding: gutter();
 @include clearfix;
 .ttd {
 @include gallery(3 of 12);
 }
 }
 .ttable {
 display: table;
 height: 500px;
 border: 1px solid #BF0D3E;;
 }
 .ttd {
 display: table-cell;
 background-color: #eee;
 height: 500px;
 }

Это не работает с SUSY, но работает с выключенным микшином:

.ttable {
 display: table;
 height: 100%;
 border: 1px solid $fuschia;
}
.ttd {
 display: table-cell;
 background-color: #eee;
 height: 100%;
}
1 ответ

Галерея mixin использует поплавки и поля для позиционирования элементов, которые не будут работать с отображением таблицы. Первый работает, потому что стили таблицы игнорируются, и элементы перемещаются с заданной высотой. Если вы хотите использовать стили таблиц для получения равных высот, вы должны оставить их в галерее mixin и использовать отдельные микшины/функции для установки ширины/желобов (я думаю, что только inside и inside-static желоба будут работать с отображением таблицы).

.ttd {
 @include gutters;
 display: table-cell;
 background-color: #eee;
 width: span(3 of 12);
}

licensed under cc by-sa 3.0 with attribution.