使柱的高度相等 - 筑巢

我有一个使用外面两列，并在设计中的标题部分外柱和下面两列，像这样的一个：使柱的高度相等 - 筑巢

************************** 
*   header  * 
************************** 
|    |  | 
|    |  | 
|  out1  | out2 | 
|    |  | 
|    |  | 
|    |  | 
************************** 
*   footer  * 
************************** 


************************** 
*   header  * 
************************** 
|  title  |  | 
|________________|  | 
|   |  |  | 
|   |  |  | 
| in1 | in2 |  | 
|   |  |  | 
|   |  |  | 
|   |  |  | 
************************** 
*   footer  * 
**************************

现在，一些的列有边框，所以out2有左边框，in1有右边框。整个页面有一个微弱的大背景平铺图像。

我想使列使用jQuery相同的高度，所以列边框看起来是平等的。

我这样做的方式是让外部列的高度相同，然后尝试使内部列的高度相同，并且尝试使它们一直伸展到底部他们的in1容器（在out2比out1高的情况下）

难以置信的是out1中的标题部分需要在计算中考虑。

OUT1 OUT2 &包含与layout类，便于选择查询和IN1一个div内，IN2 &标题被包裹一个div内部与类layout和nested（嵌套和外之间容易选择和分化）。

每个布局容器也有一个div.clear来取消浮动列高度的效果。

这是我在准备处理程序运行代码：

var layouts = $('.layout').get(); 

// sort to have .nested last 
layouts.sort(function(a,b){ 
    return $(a).hasClass('nested'); 
}); 

$(layouts).each(function(){ 

     var $this = $(this); 

     var container_height = $this.height(); 


     if ($this.hasClass('nested')) 
     { 
      var parent = $this.parent(); 
      var heading = $this.siblings('h1'); 
      var parent_h = parent.innerHeight(); 

      container_height = parent_h-heading.innerHeight() - 9; // (i'm not sure why I need -9 here, just go with it, it's not critical to the problem) 
     } 



     var columns = $this.find('> div').not('.clear'); 

     columns.each(function(){ 
      var padding = $(this).innerHeight() - $(this).height(); 
      $(this).height(container_height - padding); 
     }); 

    });

它主要从事。在safari（mac * ipad）上，我发现它有助于在运行该代码之前设置一个延迟（即使它在一个准备好的事件中被触发），但是存在随机的不一致性，其中列高度误计算得太小，并导致布局流动在页脚之上。

我曾考虑过使用Faux Columns，但由于内部标题部分的原因，文档上的边框和背景图片的组合使得它变得不可能（人造列背景不应显示在该区域内，但我仍应该看穿页面背景）

你有没有什么聪明的想法可以使这个更简单，或者你能提供一些见解，为什么偶尔出现错误计算？

由于

来源

2011-06-09 Ben

如果您愿意参与纯CSS实施，请查看http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths – 2011-06-09 01:23:49

你能提供一个[jsFiddle demo]（http://jsfiddle.net/）你当前的解决方案吗？它会帮助我们回答你的问题。 – thirtydot 2011-06-09 01:25:17

@Matt。我看到了这个。我的印象是只适用于基于纯色背景色的列效果，我说得对吗？ – Ben 2011-06-09 01:27:44

一个appraoch可以是具有三列包裹在含有元素和无视外部列。您的标题将位于三列之上，您可以指定宽度以匹配三列中的前两列。

然后，您可以向第三列应用负边距，使其与页面标题对齐。这将允许您为边界使用背景图片，而不必使用jquery进行排列。

来源

2011-06-10 00:00:52 ampt

太棒了！组合+人造色彩背景后处理，基本上（来自问题图）in1，in2和out2都是同一级别的列（没有嵌套），out2接收到一个负余量来推动它。然后，我只需要在标题部分应用一个边框右键来伪造一小部分列。 – Ben 2011-06-10 03:29:38

使柱的高度相等 - 筑巢

回答

相关问题