Sass Susy grid-任何（简单？）的制作方法'；列'；同样的高度？

用Susy/sass/haml等弄湿我的脚（使用调整后的中间商-使用master branch的最新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);
  }
}

此代码段来自site.css.scss

.main {
  background-color: #eee;
}

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

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

.身体背景是黑色的

现在，当主左侧的内容大于主右侧时，我在右下角看到一个黑色正方形。。。 我能不能让右下角的主右下角与主左下角的高度（动态）相同？或者让主背景应用

谢谢

彼得

PS有更多学分的人应该在stackoverflow中做一个Susy标记

#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彼此匹配，就像它们是相邻的表单元格一样。 别担心，这不符合使用表进行布局的条件，对于列来说很酷，并且不会给我带来任何问题。 当然，糟糕的旧浏览器不支持它，但是你可以在必要的地方使用.js脚本来修补它

这将使两个div彼此匹配，就像它们是相邻的表单元格一样。 别担心，这不符合使用表进行布局的条件，对于列来说很酷，并且不会给我带来任何问题。

---

当然，糟糕的旧浏览器不支持它，但是你可以在必要的地方使用.js脚本来修补它。

我签出了display:table；并查看其用途，但@include pad（1,1）；是什么导致了这个问题。。。我不想让那些填充栏的颜色变成.main，它们必须是黑色的。。。所以它确实是。必须伸展的主右翼。。。或者.main left在奇怪的情况下，左边的内容比右边的少…如果您需要额外的内容添加到边距而不是填充，您可以使用

squish（1,1）

而不是

pad（1,1）

。好的，找到答案了。。。组合两种显示：表格单元格和挤压。非常感谢你。[Eric，Susy看起来真的很棒：-）]我查看了display:table；并查看其用途，但@include pad（1,1）；是什么导致了这个问题。。。我不想让那些填充栏的颜色变成.main，它们必须是黑色的。。。所以它确实是。必须伸展的主右翼。。。或者.main left在奇怪的情况下，左边的内容比右边的少…如果您需要额外的内容添加到边距而不是填充，您可以使用

squish（1,1）

而不是

pad（1,1）

。好的，找到答案了。。。组合两种显示：表格单元格和挤压。非常感谢你。[Eric，Susy看起来真的很棒：-）]等高圆柱与Susy是截然不同的问题。CSS中没有完美的答案，但有几种解决方法，包括使用背景来伪造，使用表格显示等。任何选项都可以与Susy一起使用。嗨，Peter，欢迎使用SO:）最好接受答案，让其他有类似问题的人知道这解决了您的问题（更不用说你得到了一个徽章！）等高列确实是一个与Susy截然不同的问题。CSS中没有完美的答案，但有几种解决方法，包括使用背景来伪造，使用表格显示等。任何选项都可以与Susy一起使用。嗨，Peter，欢迎使用SO:）最好接受一个答案，让其他有类似问题的人知道这解决了你的问题（更不用说你得到了徽章！）。