Susy 2:固定宽度的侧边栏,带有流体主要内容区域

Question

使用Susy 2(候选版本),我试图弄清楚如何使用固定宽度的侧边栏创建一个简单的流体布局 - 左侧或右侧 - 我很高兴使用第一个和最后一个关键字.谁能给我任何关于如何在Susy 2中做到这一点的指示？

谢谢!

Answer 1

根据您自己的具体情况,有几种方法可以混合固定/流体布局.

1. 隔离侧栏.

   浮动隔离是保持浮动彼此独立的一种很酷的方式.

   .side {
     @include span(3 static isolate);
   }
   
   .main {
     @include full;
     padding-left: span(3 static wide);
   }
   
   // or...
   
   .main {
     margin-left: span(3 static wide);
   }
   

   span(3 static)将使用您的column-width设置/单位跨越3列.添加isolate将设置负右边距,以防止占用水平空间.添加wide,将包括该宽度的额外排水沟.您也可以使用任意宽度200px.由你决定.

2. 完全从流动中移除侧杆.

   如果从流程中移除侧边栏是安全的,有时最简单的方法是将其放置,并在主要内容中添加相同的填充.使用Susy 2,看起来像这样:

   .side {
     position: absolute;
     left: 0;
     top: 0;
     width: span(3 static);
   }
   
   .main {
     padding-left: span(3 static wide);
   }
   

3. 使用布局上下文黑客.

   还有一些方法可以创建一个新的布局上下文,它将填充浮动后的剩余空间.最简单的是overflow: hidden;

   .side {
     @include span(3 static);
   }
   
   .main {
     overflow: hidden;
   }
   

   这样做的缺点是如果你因任何原因需要溢出.还有其他技术,有其他hackey缺点,像这样:

   .main {
     display: table-cell;
     vertical-align: top;
     width: 10000px;
   }