Susy网格-有什么（简单的方法）使“列”具有相同的高度？ [英] Susy grid - any (easy?) way to make 'columns' the same height?

问题描述

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

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

将此内容保存在grid.css.scss

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);
  }
}

此代码段来自site.css.scss

this snippet comes from site.css.scss

.main {
  background-color: #eee;
}

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

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

.body背景为黑色...

.body background is black...

现在，当main-left中的内容大于main-right时，我会在右下角看到一个黑色方块...
以任何方式可以使该右下角#eee iow main-right与main-left相同的高度（动态）-或具有要应用的.main背景... ???

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...???

谢谢

Peter

PS拥有更多积分的人应该在stackoverflow中制作一个Susy标签...

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

推荐答案

#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彼此匹配，就好像它们是相邻的表单元格一样。
不用担心，这不适合使用表格进行布局，列很酷，也不会给我造成任何问题。
当然，糟糕的旧浏览器不支持它，但是您可以使用.a脚本，例如 ie9.js 在必要时对其进行修补。

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.

这篇关于Susy网格-有什么（简单的方法）使“列”具有相同的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！