Susy grid - any (easy?) way to make 'columns' the same height?

问题

Getting my feet wet with Susy/sass/haml etc (using adjusted middleman - with latest susy from master branch)

Have this in 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);
  }
}

this snippet comes from site.css.scss

.main {
  background-color: #eee;
}

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

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

.body background is black...

Now when content in main-left is larger than main-right I see a black square on the bottom right... Any way I can make that bottom right #eee i.o.w. main-right the same height (dynamic) as main-left - or have the .main background to apply...???

Thanks

Peter

PS Somebody with more credits should make a Susy tag in stackoverflow...

回答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;
}

This will make the two divs match each other as if they were adjacent table cells. Don't worry, this doesn't qualify as using tables for layout, it's cool for columns, and it's not caused me any problems. Of course, shitty old browsers don't support it, but you could use a .js script like ie9.js to patch it where necessary.

来源：https://stackoverflow.com/questions/12026053/susy-grid-any-easy-way-to-make-columns-the-same-height

标签

Sass

compass-sass

susy-compass