使列相等的高度 - 与嵌套 [英] Make columns equal heights - with nesting

问题描述

我有一个设计，使用两个外列，在一个标题部分的外层列和下面两个其他列，如下：

  ************************** 
 * header * 
 ****** ******************** 
 | | | 
 | | | 
 | out1 | out2 | 
 | | | 
 | | | 
 | | | 
 ************************** 
 * footer * 
 ********* ***************** 
 
 
 ******************* ***** 
 * header * 
 ************************** 
 |标题| | 
 | ________________ | | 
 | | | | 
 | | | | 
 | in1 | in2 | | 
 | | | | 
 | | | | 
 | | | | 
 ************************** 
 * footer * 
 ********* ***************** 
  

现在，列具有边框，因此out2具有左侧边界，而in1具有右侧边界。整个页面有一个微弱的大背景平铺图像。

我试图使列使用jquery相同的高度，所以列边框看起来相等。

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

在它变得棘手的是out1中的标题部分需要被考虑用于计算。

out1& out2包含在一个带有布局的div 类中，以方便选择器查询和in1，in2& title被包装在一个带有 layout 和嵌套的div中（为了方便选择器和嵌套和外部之间的区分）。

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

这是我在就绪处理程序上运行的代码：

  var layouts = $（'。layout'）。get ）; 
 
 //排序有.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; //我不知道为什么我需要-9在这里，只是去与它，这不是关键的问题）
} 
 
 
 
 var columns = $ this .find（'> div'）。not（'。clear'）; 
 
 columns.each（function（）{
 var padding = $（this）.innerHeight $（this）.height（）; 
 $（this）.height（container_height  -  padding）; 
}）; 
 
} 
  

它主要工作。在safari（mac * ipad），我发现它有助于在运行代码之前设置一个延迟（即使它是在ready事件中触发的），但是有随机的不一致，其中列高度被错误计算得太小，并且导致布局流

我想过使用 Faux列，但是文档的边框和背景图像的组合使得它不可能，因为内部标题部分（假的列背景不应该显示在该区域内，但我仍然应该看到页面背景） / p>

你有什么聪明的想法会使这个更简单，或者你能提供一些洞察，为什么偶尔的错误计算发生吗？

感谢

解决方案

一个appraoch可能是三个列包含在一个包含元素中并忽略外部列。您的标题只会放在三列的上方，您可以指定一个宽度以匹配三个列的前两列。

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

I have a design that uses two outer columns, and within one of the outer columns in a heading section and two more columns below, like so:

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


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

Now, some of the columns have borders, so out2 has a left hand side border and in1 has a right hand side border. The entire page has a faint large background tiling image.

I'm trying to make the columns the same height using jquery so the column borders look equal.

The way I've gone about it is to make the outer columns the same height, then try to make the inner columns both the same height, and as well, try to make them stretch all the way to the bottom of their in1 container (in the case where out2 is taller than out1)

Where it gets tricky is the title section inside out1 needs to be accounted for in the calculations.

out1 & out2 are contained inside a div with a layout class for easy selector query and in1, in2 & title are wrapped inside a div with the classes layout and nested (for easy selector and differentiation between nested and outer).

each layout container also has a div.clear to cancel out the effect of floating the columns on the height.

This is the code I run on the ready handler:

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

    });

It mainly works. On safari (mac * ipad), I find it helps to set a delay before running that code (even though it's triggered within a ready event) but there are random inconsistencies where the column height is miscalculated too small, and causes the layout to flow over the footer.

I thought about using Faux Columns but the combination of borders and a background image on the document make it impossible because of the inner title section (the faux columns background should not display within that area, but I should still see through to the page background)

Do you have any clever idea that would make this simpler or could you provide some insight into why the occasional miscalculation happens?

Thanks

解决方案

One appraoch may be to have the three columns wrapped in a containing element and disregard the outer columns. Your title would just sit above the three columns which you could specify a width to match the first two columns of the three.

Then you could apply a negative margin to the thrid column, making it line up with the page title. This will allow you to use a background image for the borders and not have to line things up with jquery.

这篇关于使列相等的高度 - 与嵌套的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！