Susy gallery breaks height for display table and table-cell

Question

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

Я использую:

• суперсимметрии (2.1.3) и
• дерзость (~> 3,3)

Это работает с или без суперсимметрии:

.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, но работает с mixin выключен:

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

Answer 1

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

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