使列等高 - 使用嵌套

Question

我的设计使用两个外列，在标题部分的一个外列和下面的另外两列中，如下所示：

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


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

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

我正在尝试使用 jquery 使列的高度相同，以便列边框看起来相等。

我采取的方法是使外列的高度相同，然后尝试使内列的高度相同，同时尝试使它们一直延伸到它们的底部in1 容器（在 out2 高于 out1 的情况下）

棘手的地方在于需要在计算中考虑 out1 内的标题部分。

out1 和 out2 包含在带有 layout 类的 div 中，以便于选择器查询，并且 in1、in2 和标题包含在带有 layout 和 nested 类的 div 中（以便于选择器和区分嵌套和外部）。

每个布局容器还有一个 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，但是由于内部标题部分，文档上的边框和背景图像的组合使其不可能（人造列背景不应显示在该区域内，但我仍然应该看穿页面背景）

您是否有任何巧妙的想法可以使这更简单，或者您能否提供一些关于为什么偶尔会发生错误计算的见解？

谢谢

Answer 1

一种方法可能是将三列包裹在一个包含元素中，而忽略外部列。您的标题将位于三列之上，您可以指定宽度以匹配三列的前两列。

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