使列与高度相等 – 使用嵌套
我有一个使用两个外部列的设计，在一个标题部分的外部列中，另外两个列在下面，如下所示：
************************** * header * ************************** | | | | | | | out1 | out2 | | | | | | | | | | ************************** * footer * ************************** ************************** * header * ************************** | title | | |________________| | | | | | | | | | | in1 | in2 | | | | | | | | | | | | | | ************************** * footer * ************************** 现在，一些列具有边框，因此out2具有左侧边框，而in1具有右侧边框。 整个页面都有一个微弱的大背景拼贴图像。
我正在尝试使用jquery使列具有相同的高度，因此列边框看起来相同。
我的方法是让外柱的高度相同，然后尝试使内柱的高度相同，并尝试使它们一直伸展到它们的in1容器的底部（在out2高于out1的情况下）
它变得棘手的是out1中的标题部分需要在计算中考虑。
out1和out2包含在div中，其layout类用于简单的选择器查询，in1，in2和title包含在具有类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但是文档上的边框和背景图像的组合使得它不可能因为内部标题部分（人造列背景不应该在该区域内显示，但我仍然应该看到页面背景）
您是否有任何聪明的想法可以使这更简单，或者您是否可以提供一些有关偶然错误计算的原因的见解？
谢谢
一个appraoch可能是将三列包含在包含元素中并忽略外部列。 您的标题将位于三列之上，您可以指定宽度以匹配三列中的前两列。
然后，您可以对thrid列应用负边距，使其与页面标题对齐。 这将允许您使用背景图像作为边框，而不必使用jquery排序。