Susy grid - 任何（简单？）方法可以使“列”具有相同的高度？

Question

用 Susy/sass/haml 等弄湿我的脚（使用调整后的中间人 - 来自 master 分支的最新 susy）

在 grid.css.scss 中有这个

@import 'susy';

$total-columns  : 8;
$column-width   : 4em;
$gutter-width   : 0em;
$grid-padding   : $gutter-width;

$break-max      : 12;

$container-style: magic;

// Container
.page {
  @include container($total-columns, $break-max);
}

// Layout

.header {
  @include at-breakpoint($break-max) {
    @include pad(1,1);
  }
}

.pagenav {
  clear: both;
  @include at-breakpoint($break-max) {
    @include pad(1,1);
  }
}

.main {
  clear: both; 
  .main-left {  
    @include span-columns($total-columns omega);
    @include at-breakpoint(10) {
      @include span-columns(7);  
    } 
  }
  .main-right {  
    @include span-columns($total-columns omega);  
    @include at-breakpoint(10) {
      @include span-columns(3 omega);  
    }        
  }
  @include at-breakpoint($break-max) {
    @include pad(1,1);
  }
}

.footer {
  clear: both;
  @include at-breakpoint($break-max) {
    @include pad(1,1);
  }
}

这个sn-p来自site.css.scss

.main {
  background-color: #eee;
}

.main-left {
  background-color: #fff;
}

.main-right {
  background-color: #eee;
}

.body 背景是黑色的...

现在，当 main-left 中的内容大于 main-right 时，我会在右下角看到一个黑色方块... 无论如何，我都可以做到右下角#eee i.o.w。 main-right 与 main-left 具有相同的高度（动态） - 或者具有要应用的 .main 背景...???

谢谢

彼得

PS 有更多学分的人应该在 stackoverflow 中创建一个 Susy 标签...

Answer 1

#main {
  display: table;
  background-color: #eee;
}
.main-left,
.main-right{
  display: table-cell;
  vertical-align: top;
}
.main-left {
  background-color: #fff;
}

.main-right {
  background-color: #eee;
}

这将使两个 div 相互匹配，就好像它们是相邻的表格单元格一样。 别担心，这不符合使用表格进行布局的条件，对于列来说很酷，而且不会给我带来任何问题。 当然，糟糕的旧浏览器不支持它，但你可以使用像 ie9.js 这样的 .js 脚本在必要时对其进行修补。